After I added a parameter to one of the routes, all the other routes stopped rendering correctly (i.e., router-view is not working at all). The route /download/:id works as expected. Am I missing something in the setup? I tried leaving and removing the /download path without the parameter, but it changed nothing. Also, I went through the documentation, but I couldn't find an example where they had this situation - either it worked like this or most often they only used one route in the example.
router/index.ts:
import About from '@/views/About.vue'
import Downloads from '@/views/Downloads.vue'
import Home from '@/views/Home.vue'
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/about',
name: 'About',
component: About,
},
{
path: '/download',
name: 'Downloads',
component: Downloads
},
{
path: '/download/:id',
name: 'Downloads',
component: Downloads
}
]
const router = createRouter({
history: createWebHistory(),
routes,
})
export default router
main.ts:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
App.vue:
<script setup lang="ts">
import * as themeJson from '@/assets/theme.json';
import Menu from '@/components/Menu.vue';
import {
NConfigProvider,
NLayout,
NLayoutContent,
NLayoutHeader
} from 'naive-ui';
import 'vfonts/FiraSans.css';
</script>
<template>
<NConfigProvider :theme-overrides="themeJson">
<NLayout>
<NLayoutHeader class="header">
<Menu />
</NLayoutHeader>
<NLayoutContent class="content">
<router-view />
</NLayoutContent>
</NLayout>
</NConfigProvider>
</template>
Home.vue:
<script setup lang="ts">
import logo from '@/assets/logo.svg';
import { NButton, NH1 } from 'naive-ui';
</script>
<template>
<div class="hero">
<img :src="logo" alt="gbl portal logo" class="hero-logo" />
<NH1 class="hero-title">GBL Portal</NH1>
<div class="hero-quick-actions">
<router-link :to="{ name: 'Downloads', params: {id: 'a152b'}}">
<NButton type="primary" size="large">Downloads</NButton>
</router-link>
<router-link :to="{ name: 'About' }">
<NButton size="large">About</NButton>
</router-link>
<</div>
</div>
</template>