Vue-router 如何在嵌套路由的同时做多级菜单(面包导航)?

  {
    path: '/user',
    name: '用户管理',
    component: User,
    children: [
      {
        path: '/user/list',
        component: UserList,
        name: '用户列表',
        children: [
          {
            path: '/user/list/:userId/detali',
            component: UserDetail,
            name: '用户详情'
          }
        ]
      }
    ]
  }

在使用vue-router时遇到的问题,因为我使用$route来做面包屑导航
但是这样嵌套路由的话,第三级的 UserDetail 会在 UserList 中渲染,但其实这个页面不需要UserList的内容
请问我要怎样做?有没有好的办法?

UserDetail其实是想在 User 的 中渲染
而三级导航菜单(面包屑导航)又不想改变
就是不想把 UserList 和 UserDetail 做成平级

你好!请问你解决了这个问题了没?我现在也遇到过这个问题

image

你的路由就是这么写的,所以这么渲染

可以考虑使用命名路由,看看能不能将试图命名多个

需要多层级的导航,如顶栏提供栏目导航,在栏目下侧栏提供了第二层内容导航。
image

每一层的导航都需要一个动态路由视图作为渲染出口,从而构成了 嵌套的路由视图。以两层为例,多层一个意思。在根组件的模板中,我们声明的router-view 将作为顶层渲染出口,而在组件EzBlogs的模板中声明的router-view 将作为二级渲染出口:
image
与之对应的,需要为指向EzBlogs组件的路由记录使用children 配置项声明子级路由记录,如上图所示。
嵌套路由的实现可以简单地总结为一句话: 如果组件使用了路由视图,就应当为它的路由声明子路由。

上面内容是我在一个教程中截出来的,希望有帮助。
教程地址贴给大家:
vue-router 入门与提高

react的router好像有exact选项,vue暂时不知道有没有,不过考虑类似的思路,在list中加入v-if,判断$router的path就可以了

我也遇到这个需求了,目前打算用v-if