vue3 router一级路由和二级路由同时存在渲染侧边栏的问题？

Z时代
2024-02-14
分类：IT

{
    path: '/test2',
    name: 'test2',
    redirect: '/test2/A',
    component: Layout,
    meta: { chName: 'Test2', icon: 'LocationFilled', hidden: false },
    children: [
      {
        path: 'A',
        name: 'test2A',
        meta: { chName: 'Test2A', icon: 'CaretRight', hidden: true },
        component: () => import('@/views/Test2/Test2A.vue')
      },
      {
        path: 'B',
        name: 'test2B',
        meta: { chName: 'Test2B', icon: 'CaretRight', hidden: true },
        component: () => import('@/views/Test2/Test2B.vue')
      },
      {
        path: 'C',
        name: 'test2C',
        meta: { chName: 'Test2C', icon: 'CaretRight', hidden: true },
        component: () => import('@/views/Test2/Test2C.vue')
      }
    ]
  },
  {
    path: '/test3',
    name: 'test3',
    component: () => import('@/views/Test3/Test3.vue'),
    meta: { chName: 'Test3', icon: 'LocationFilled', hidden: false }  }

救救孩子到底怎么配。做了半天了，想模拟做个权限数组，test2是可以展示的，test3一直没有被layout包裹，导致单独出现了，后面试了这个写法
{

path: '/test3',
component: Layout,
children: [
  {
    path: '',
    name: 'test3',
    redirect: '/test3',
    meta: { chName: 'Test3', icon: 'LocationFilled', hidden: false }
  }]

}
这样addRoute加进去了，但是这一条的path是空啊，跳转不了，而且加进去顺序也不知道为什么变成了第一条。。有大佬给个模板学习吗？真不知道怎么配了。
卡住的原因是想让test3做一个一级菜单，test2那种做二级菜单，如果都做2级那也还好。

回答：

你的提问语言组织有点混乱不太理解你想解决什么问题
只能丢给chatGpt让它帮忙看看，不知道能不能解决你的问题：
你可以将test3作为一级路由，然后将其放在与test2相同的层级。具体地说，你可以将test2和test3都放在一个名为“children”的数组中，如下所示：

{
  path: '/',
  component: Layout,
  redirect: '/test2/A',
  children: [
    {
      path: 'test2',
      name: 'test2',
      redirect: '/test2/A',
      component: () => import('@/views/Test2/Test2.vue'),
      meta: { chName: 'Test2', icon: 'LocationFilled', hidden: false },
      children: [
        {
          path: 'A',
          name: 'test2A',
          meta: { chName: 'Test2A', icon: 'CaretRight', hidden: true },
          component: () => import('@/views/Test2/Test2A.vue')
        },
        {
          path: 'B',
          name: 'test2B',
          meta: { chName: 'Test2B', icon: 'CaretRight', hidden: true },
          component: () => import('@/views/Test2/Test2B.vue')
        },
        {
          path: 'C',
          name: 'test2C',
          meta: { chName: 'Test2C', icon: 'CaretRight', hidden: true },
          component: () => import('@/views/Test2/Test2C.vue')
        }
      ]
    },
    {
      path: 'test3',
      name: 'test3',
      component: () => import('@/views/Test3/Test3.vue'),
      meta: { chName: 'Test3', icon: 'LocationFilled', hidden: false }
    }
  ]
}