如何让三级路由占据二级路由视图上的位置

[jawn-ha]

有三级嵌套路由,他们逻辑上有嵌套，但是视图上没有嵌套，下面路由的部分

  {
    path: '/account',
    component: Layout,
    redirect: '/account/userList',
    name: 'account',
    meta: { title: '账号管理', icon: 'user' },
    children: [
      {
        path: 'userList',
        name: 'userList',
        component: () => import('@/views/account/userList'),
        meta: { title: '用户账号管理' },
        children: [
          {
            path: 'view',
            name: 'view',
            component: () => import('@/views/account/userView'),
            meta: { title: '查看', noCache: true, activeMenu: '/accout/userList' },
            hidden: true
          }
        ]
      }
   ]
}

第三级路由视图上与第二级路由没有嵌套关系，但是由于需要处理面包屑，二级路由和三级路由存在逻辑上的嵌套关系，三级路由页面不需要出现一个侧边导航，有什么办法能够在不改变路由表的情况下，让第三级视图显示在第二级视图的位置？也就是app-main的位置，各位大神，欢迎提出你们的高见，感激不尽！！！

[bujidao]

你可以研究一下大裤衩的思路： https://github.com/PanJiaChen/vue-element-admin/tree/master/src/layout/components/Sidebar

大裤衩用的elementui的NavMenu 导航菜单功能 NavMenu 的结构是（菜单显示头+子菜单）

思路大致是: 判断路由里面children： 第一步，用children.filter筛选剃掉hidden = true 的值 第二步，判断孩子个数

if(children && children个数等于1 ){ NavMenu.菜单头 = 这个孩子 } if(children && children个数等于0 ){ NavMenu.菜单头 = 自己本身 } 如果以上都不满足{ NavMenu.菜单头 = 自己本身 NavMenu.子菜单 = 孩子们 }

这样，就把一级目录和二级目录搞定了，那，怎么来搞定三级以上的目录呢？ 作者很聪明：把NavMenu（菜单头+子菜单） 封装成一个组件，然后在NavMenu子菜单里面又调用NavMenu，通过递归，这样就实现多级目录的功能

[laoliya]

你好解决了吗。我刚遇到这个问题。可以加个QQ吗936366286

[jawn-ha]

根据$route.path用v-if隐藏了二级子路由的页面内容

[laoliya]

export default { data(){ return{

    }
},
methods:{
    dd(){
        this.$router.push("/property/balance/list1")
        console.log(this.$route.path === '/property/balance/list1');
    }
}

} export default { components:{threeBalance}, data(){ return{ viewShow:true } }, watch:{ '$route.path':function(newVal,oldVal){ cosnole.log('触发了'); if(newVal === '/property/balance/list1'){ this.viewShow=false; }else{ this.viewShow=true; } } } 路由跳转后这里怎么不触发呢

[lrsoy]

so,你现在这个问题是怎么解决的？? 2022年的此时此刻，我也遇到了