vue-element-admin 三級路由

三級路由的設置非常簡單，不過不知道其原理就會不知道是如何設置的。

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' }
          }
        ]
      }
    ]
}

 

 以上就可以實現三級路由的設置了，並用前端操作中三級菜單時就如同獨立路由一樣。