I am working on a Vue project and I want to implement nested routes in my router.js. My goal is to have just one menu for all the nested routes and only one
<router-view></router-view>This is what I envision (in pseudocode):
<master>
<menu>
</menu>
<router-view>
</router-view>
</master>
In my router.js, I have:
{
path: '/master',
name: 'master',
component: Master,
children:[
{
path: ':team',
name: 'team',
component: Team,
children:[
{
path: ':group',
name: 'group',
component: Group,
children:[
{path: ':one',
name: 'one',
component: One}
]
}
]
}
]
}
Within my Master.vue file, I have:
<template>
<div>
<router-link class="link" :to="{name:'team', params: {team: 'ta'}}">team a</router-link>
<router-link class="link" :to="{name:'team', params: {team: 'tb'}}">team b</router-link>
<router-link class="link" :to="{name:'group', params: {group: 'ga'}}">group a</router-link>
<router-link class="link" :to="{name:'group', params: {group: 'gb'}}">group b</router-link>
<router-link class="link" :to="{name:'one', params: {one: 'oa'}}">one a</router-link>
<router-link class="link" :to="{name:'one', params: {one: 'ob'}}">one b</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "Master"
}
</script>
Unfortunately, this setup is not functioning as expected. When I navigate from team b to a group, the URL becomes ta/ga instead of tb/ga.
Additionally, I am receiving these warnings:
[vue-router] Duplicate named routes definition: { name: "team", path: "/master/:team" }
[vue-router] Duplicate named routes definition: { name: "group", path: "/master/:team/:group" }
[vue-router] Duplicate named routes definition: { name: "one", path: "/master/:team/:group/:one" }
[vue-router] Duplicate named routes definition: { name: "master", path: "/master" }
[vue-router] missing param for named route "group": Expected "team" to be defined
[vue-router] missing param for named route "one": Expected "team" to be defined
I could simplify by removing nested routes and using path: ':team/:group/:one' but I'm unsure if that's the correct approach or aesthetically pleasing.
Is there a way to achieve both nested routes and a single menu/router structure? I appreciate any guidance you can provide.
Thank you.