首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >具有一个路由器组件和一个菜单的动态Vue路由

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

Stack Overflow用户
提问于 2019-09-18 20:28:48
回答 1查看 221关注 0票数 0

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

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

代码语言:javascript
运行
复制
<master>

  <menu>
  </menu>

  <router-view>    
  </router-view>

</master>

在我的router.js

代码语言:javascript
运行
复制
{ 
  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中,我有

代码语言:javascript
运行
复制
<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,然后转到一个组,url变成ta/ga,它应该是tb/ga

编辑,我也收到了这些警告

代码语言:javascript
运行
复制
[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',我不知道它是否正确,也不是很优雅。

我怎样才能两全其美呢?嵌套路由和一个菜单/一个路由器?有可能吗?

谢谢

EN

回答 1

Stack Overflow用户

发布于 2019-09-18 21:25:42

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

代码语言:javascript
运行
复制
 <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>

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57992854

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档