支持三级菜单自动配置组件&缓存数据

src/layout/components/Sidebar/index.vue

@@ -12,7 +12,7 @@
         :collapse-transition="false"
         :collapse-transition="false"
         mode="vertical"
         mode="vertical"
       >
       >
-        <sidebar-item v-for="route in permission_routers" :key="route.path" :item="route" :base-path="route.path" />
+        <sidebar-item v-for="route in sidebarRouters" :key="route.path" :item="route" :base-path="route.path" />
       </el-menu>
       </el-menu>
     </el-scrollbar>
     </el-scrollbar>
   </div>
   </div>
@@ -28,7 +28,7 @@ export default {
   components: { SidebarItem, Logo },
   components: { SidebarItem, Logo },
   computed: {
   computed: {
     ...mapGetters([
     ...mapGetters([
-      'permission_routers',
+      'sidebarRouters',
       'sidebar'
       'sidebar'
     ]),
     ]),
     activeMenu() {
     activeMenu() {

src/router/index.js

@@ -53,12 +53,17 @@ router.beforeEach((to, from, next) => {
 
 
 export const loadMenus = (next, to) => {
 export const loadMenus = (next, to) => {
   buildMenus().then(res => {
   buildMenus().then(res => {
-    const asyncRouter = filterAsyncRouter(res)
-    asyncRouter.push({ path: '*', redirect: '/404', hidden: true })
-    store.dispatch('GenerateRoutes', asyncRouter).then(() => { // 存储路由
-      router.addRoutes(asyncRouter) // 动态添加可访问路由表
+    const sdata = JSON.parse(JSON.stringify(res))
+    const rdata = JSON.parse(JSON.stringify(res))
+    const sidebarRoutes = filterAsyncRouter(sdata)
+    const rewriteRoutes = filterAsyncRouter(rdata, true)
+    rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
+
+    store.dispatch('GenerateRoutes', rewriteRoutes).then(() => { // 存储路由
+      router.addRoutes(rewriteRoutes) // 动态添加可访问路由表
       next({ ...to, replace: true })
       next({ ...to, replace: true })
     })
     })
+    store.dispatch('SetSidebarRouters', sidebarRoutes)
   })
   })
 }
 }
 
 

src/store/getters.js

@@ -19,6 +19,7 @@ const getters = {
   updateAvatarApi: state => state.api.updateAvatarApi,
   updateAvatarApi: state => state.api.updateAvatarApi,
   qiNiuUploadApi: state => state.api.qiNiuUploadApi,
   qiNiuUploadApi: state => state.api.qiNiuUploadApi,
   sqlApi: state => state.api.sqlApi,
   sqlApi: state => state.api.sqlApi,
-  swaggerApi: state => state.api.swaggerApi
+  swaggerApi: state => state.api.swaggerApi,
+  sidebarRouters: state => state.permission.sidebarRouters
 }
 }
 export default getters
 export default getters

src/store/modules/permission.js

 import { constantRouterMap } from '@/router/routers'
 import { constantRouterMap } from '@/router/routers'
 import Layout from '@/layout/index'
 import Layout from '@/layout/index'
+import ParentView from '@/components/ParentView'
 
 
 const permission = {
 const permission = {
   state: {
   state: {
     routers: constantRouterMap,
     routers: constantRouterMap,
-    addRouters: []
+    addRouters: [],
+    sidebarRouters: []
   },
   },
   mutations: {
   mutations: {
     SET_ROUTERS: (state, routers) => {
     SET_ROUTERS: (state, routers) => {
       state.addRouters = routers
       state.addRouters = routers
       state.routers = constantRouterMap.concat(routers)
       state.routers = constantRouterMap.concat(routers)
+    },
+    SET_SIDEBAR_ROUTERS: (state, routers) => {
+      state.sidebarRouters = routers
     }
     }
   },
   },
   actions: {
   actions: {
     GenerateRoutes({ commit }, asyncRouter) {
     GenerateRoutes({ commit }, asyncRouter) {
       commit('SET_ROUTERS', asyncRouter)
       commit('SET_ROUTERS', asyncRouter)
+    },
+    SetSidebarRouters({ commit }, sidebarRouter) {
+      commit('SET_SIDEBAR_ROUTERS', sidebarRouter)
     }
     }
   }
   }
 }
 }
 
 
-export const filterAsyncRouter = (routers) => { // 遍历后台传来的路由字符串，转换为组件对象
+export const filterAsyncRouter = (routers, isRewrite = false) => { // 遍历后台传来的路由字符串，转换为组件对象
   return routers.filter(router => {
   return routers.filter(router => {
+    if (isRewrite && router.children) {
+      router.children = filterChildren(router.children)
+    }
     if (router.component) {
     if (router.component) {
       if (router.component === 'Layout') { // Layout组件特殊处理
       if (router.component === 'Layout') { // Layout组件特殊处理
         router.component = Layout
         router.component = Layout
+      } else if (router.component === 'ParentView') {
+        router.component = ParentView
       } else {
       } else {
         const component = router.component
         const component = router.component
         router.component = loadView(component)
         router.component = loadView(component)
       }
       }
     }
     }
     if (router.children && router.children.length) {
     if (router.children && router.children.length) {
-      router.children = filterAsyncRouter(router.children)
+      router.children = filterAsyncRouter(router.children, router, isRewrite)
     }
     }
     return true
     return true
   })
   })
 }
 }
 
 
+function filterChildren(childrenMap) {
+  var children = []
+  childrenMap.forEach((el, index) => {
+    if (el.children && el.children.length) {
+      if (el.component === 'ParentView') {
+        el.children.forEach(c => {
+          c.path = el.path + '/' + c.path
+          if (c.children && c.children.length) {
+            children = children.concat(filterChildren(c.children, c))
+            return
+          }
+          children.push(c)
+        })
+        childrenMap.splice(index, 1)
+        return
+      }
+    }
+    children = children.concat(el)
+  })
+  return children
+}
+
 export const loadView = (view) => {
 export const loadView = (view) => {
   return (resolve) => require([`@/views/${view}`], resolve)
   return (resolve) => require([`@/views/${view}`], resolve)
 }
 }

src/views/nested/menu1/menu1-1/index.vue

 <template>
 <template>
   <div style="padding:30px;">
   <div style="padding:30px;">
-    <el-alert :closable="false" title="三级菜单1" type="success" />
+    <el-input v-model="input" placeholder="请输入内容" />
   </div>
   </div>
 </template>
 </template>
+<script>
+export default {
+  name: 'Test',
+  data() {
+    return {
+      input: ''
+    }
+  }
+}
+</script>