vue-router嵌套的问题

发布于 2022-09-12 03:54:54 字数 2157 浏览 14 评论 0

咨询一个嵌套路由的问题
routes定义的时候,是通过children一层一层嵌套的,但界面上不嵌套,只有两层router-view,第一层是layout,主界面部分是第二层。这样在界面的router-view显示router嵌套在底层(3层或者4层)的组件?比如下面,但界面上不可能这么复杂。

const nestedRouter = {
  path: '/authManage',
  component: Layout,
  redirect: '/authManage/menu1/menu1-1',
  name: 'Nested',
  meta: { title: 'Nested Routes', icon: 'nested' },
  children: [
    {
      path: 'menu1',
      component: () => import('@/views/nested/menu1/index'), // Parent router-view
      name: 'Menu1',
      meta: { title: 'Menu 1' },
      redirect: '/nested/menu1/menu1-1',
      children: [
        {
          path: 'menu1-1',
          component: () => import('@/views/nested/menu1/menu1-1'),
          name: 'Menu1-1',
          meta: { title: 'Menu 1-1' }
        },
        {
          path: 'menu1-2',
          component: () => import('@/views/nested/menu1/menu1-2'),
          name: 'Menu1-2',
          redirect: '/nested/menu1/menu1-2/menu1-2-1',
          meta: { title: 'Menu 1-2' },
          children: [
            {
              path: 'menu1-2-1',
              component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
              name: 'Menu1-2-1',
              meta: { title: 'Menu 1-2-1' }
            },
            {
              path: 'menu1-2-2',
              component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
              name: 'Menu1-2-2',
              meta: { title: 'Menu 1-2-2' }
            }
          ]
        },
        {
          path: 'menu1-3',
          component: () => import('@/views/nested/menu1/menu1-3'),
          name: 'Menu1-3',
          meta: { title: 'Menu 1-3' }
        }
      ]
    },
    {
      path: 'menu2',
      name: 'Menu2',
      component: () => import('@/views/nested/menu2/index'),
      meta: { title: 'Menu 2' }
    }
  ]
}

export default nestedRouter

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

云雾 2022-09-19 03:54:54

1:第三级路由就得在对应的父页面加一个<router-view/>,进行跳转子级;

2:比如你上面的menu1-1、menu1-2需要在父级menu1加一个<router-view/>跳转子级;

3:而再下一级menu1-2-1、menu1-2-2,需要在父级menu1-2加一个<router-view/>跳转子级;

淡莣 2022-09-19 03:54:54

@[凯迪Wen]
有没有办法,界面上不按照这个。比如:
image.png
image.png
父路由显示列表,子路由显示编辑具体的ECS。而不是一级一级的嵌套起来。

夜灵血窟げ 2022-09-19 03:54:54

命名路由了解一下

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文