vue-element-admin三级路由
三级路由的设置⾮常简单，不过不知道其原理就会不知道是如何设置的。
vue-element-admin⾃带的有嵌套路由，不过他的嵌套路由有⼀个套路，那就是⼆级路由页⾯下有个<router-view />标签
<template>
<router-view />
vue element admin</template>
这⾥说⼀下，这⾥的三级路由指向了⼀个页⾯，但你点击三级路由的时候，它是作为⼆级路由页⾯的⼀个窗⼝插⼊的，直接点就是说，你的第三级路由不能作为⼀个单独的页⾯存在，只能想路由⼀样依附在⼆级路由页⾯⾥⾯
解决思路：
既然只能在⼆级路由页⾯下通过窗⼝来使⽤三级路由，那么对⼆级路由的页⾯进⾏修改
<template>
<div>
//如果为⼆级路由就渲染当前HTML⽂本
<template v-if="twoRouter">
<div></div>....
</template>
//如果为第三级路由，则通过<router-view />指向第三层页⾯
<template v-else>
<router-view />
</template>
</div>
三级路由的设置
{
path: '/system',//⼀级
component: Layout,
meta: { title: '系统管理', icon: 'guide' },
children: [
{
path: '/authManage',//⼆级
component: () => import('@/views/system/authManage/index'),
redirect: 'noRedirect',
meta: { title: '权限管理', icon: 'point' },
children: [
{
path: 'roleAuth',//三级
name: 'roleAuth',
component: () => import('@/views/system/authManage/roleAuth'),
meta: { title: '⾓⾊权限管理', icon: 'point' }
},
{
path: 'orgAuth',// 三级
name: 'orgAuth',
component: () => import('@/views/system/authManage/orgAuth'),
meta: { title: '部门权限管理', icon: 'point' }
}
]
}
]
}
以上就可以实现三级路由的设置了，并⽤前端操作中三级菜单时就如同独⽴路由⼀样。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。