vue-element-admin 三級路由
阿新 • • 發佈:2021-06-21
三級路由的設定非常簡單,不過不知道其原理就會不知道是如何設定的。
vue-element-admin自帶的有巢狀路由,不過他的巢狀路由有一個套路,那就是二級路由頁面下有個<router-view />標籤
<template> <router-view /> </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' } } ] } ] }
以上就可以實現三級路由的設定了,並用前端操作中三級選單時就如同獨立路由一樣。