javascript - 具有一个路由器组件和一个菜单的动态 Vue 路由

Question

在我的 Vue 项目中，我希望在 router.js 中有嵌套路由所有嵌套路由只有一个菜单，还有一个 <router-view></router-view>在主组件中

所以我想要这个(伪代码)

<master>

  <menu>
  </menu>

  <router-view>    
  </router-view>

</master>

在我的router.js我有

{ 
  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}
          ]
        }
      ]
    }
  ]
}

在我的 Master.vue 中，我有

<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>  

这没有按预期工作。如果我点击b组然后进入a组，url就变成ta/ga它应该是 tb/ga 。

编辑，我也收到这些警告

[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

我可以删除嵌套路由，但是我的所有路由都会看起来像 path: ':team/:group/:one'我不知道这是否正确，而且不太优雅。

我怎样才能两全其美？嵌套路由和一个菜单/一个路由器？是否可以？

谢谢

Answer 1

如果是组，则必须添加团队参数，如果单击“团队 B”，则发送一个参数 (TB)，然后，如果单击“组 A”，则仅发送参数 GA，同时丢弃您提供的信息 '结核病'。解决方案:您可以在仅在选择团队时出现的嵌套路由器链接中使用 $route.params.id ，然后您可以这样做:

 <router-link class="link" :to="{name:'group', params: {group: 'ga', team: $route.params.team}}">group a</router-link> 
        <router-link class="link" :to="{name:'group', params: {group: 'gb', $route.params.team}}">group b</router-link>

您还可以将其添加到代码中，并且仅在用户输入团队时激活组链接(必须先单击一个团队，以便他们可以单击组)