vue-router嵌套的问题
咨询一个嵌套路由的问题
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
1:第三级路由就得在对应的父页面加一个
<router-view/>
,进行跳转子级;2:比如你上面的
menu1-1、menu1-2
需要在父级menu1
加一个<router-view/>
跳转子级;3:而再下一级
menu1-2-1、menu1-2-2
,需要在父级menu1-2
加一个<router-view/>
跳转子级;@[凯迪Wen]
有没有办法,界面上不按照这个。比如:
父路由显示列表,子路由显示编辑具体的ECS。而不是一级一级的嵌套起来。
命名路由了解一下