具有一個路由器組件和一個菜單的動態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，然后轉到某個組，則該網址將變為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

如果是組，則必須添加團隊參數，如果單擊TEAM B，則發送一個參數（TB），然后，如果單擊GROUP A，則僅發送參數GA，而丟棄您提供的“ TB”信息。 解決方案：您可以在嵌套的路由器鏈接中使用$ 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>

您也可以將其添加到代碼中，並且僅在用戶輸入團隊時才激活組鏈接（必須首先單擊一個團隊，這樣他們才能單擊組）