新增扁平化路由功能

src/layout/components/Topbar/index.vue

@@ -10,7 +10,7 @@
             </div>
             <el-breadcrumb v-if="$store.state.settings.mode == 'pc'" separator-class="el-icon-arrow-right">
                 <transition-group name="breadcrumb">
-                    <el-breadcrumb-item v-for="item in breadcrumbList" :key="item.path" :to="item.path">{{ item.meta.title }}</el-breadcrumb-item>
+                    <el-breadcrumb-item v-for="item in breadcrumbList" :key="item.path" :to="item.path">{{ item.title }}</el-breadcrumb-item>
                 </transition-group>
             </el-breadcrumb>
         </div>
@@ -19,6 +19,7 @@
 </template>
 
 <script>
+import { deepClone } from '@/util'
 import UserMenu from '../UserMenu'
 
 export default {
@@ -28,15 +29,34 @@ export default {
     },
     computed: {
         breadcrumbList() {
-            let matched = this.$route.matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
-            if (matched.length != 0) {
-                if (this.$store.state.settings.enableDashboard) {
-                    if (!(matched[0].name == 'dashboard' && matched[0].path == '/dashboard')) {
-                        matched = [{ path: '/dashboard', meta: { title: this.$store.state.settings.dashboardTitle }}].concat(matched)
-                    }
-                }
+            let breadcrumbList = []
+            if (this.$store.state.settings.enableDashboard) {
+                breadcrumbList.push({
+                    path: '/dashboard',
+                    title: this.$store.state.settings.dashboardTitle
+                })
             }
-            return matched
+            if (this.$store.state.settings.enableFlatRoutes) {
+                if (this.$route.meta.breadcrumbNeste) {
+                    this.$route.meta.breadcrumbNeste.map((item, index) => {
+                        let tmpItem = deepClone(item)
+                        if (index != 0) {
+                            tmpItem.path = `${this.$route.meta.breadcrumbNeste[0].path}/${item.path}`
+                        }
+                        breadcrumbList.push(tmpItem)
+                    })
+                }
+            } else {
+                this.$route.matched.map(item => {
+                    if (item.meta && item.meta.title && item.meta.breadcrumb !== false && item.path != '/dashboard') {
+                        breadcrumbList.push({
+                            path: item.path,
+                            title: item.meta.title
+                        })
+                    }
+                })
+            }
+            return breadcrumbList
         }
     }
 }

src/setting.js

@@ -31,6 +31,8 @@ let globalSettings = {
     enableDynamicTitle: false,
     // 是否开启控制台
     enableDashboard: true,
+    // 是否开启扁平化路由，开启后三级以及三级以上的嵌套路由均为被处理成二级，但侧边栏导航的层级效果不变
+    enableFlatRoutes: false,
     // 控制台名称
     dashboardTitle: '控制台',
     // 是否开启主题配置（建议在生产环境关闭）

src/store/modules/menu.js

@@ -34,6 +34,66 @@ function filterAsyncRoutes(routes, permissions) {
     return res
 }
 
+// 将多层嵌套路由处理成平级
+function flatAsyncRoutes(routes, breadcrumb, baseUrl = '') {
+    let res = []
+    routes.forEach(route => {
+        const tmp = { ...route }
+        if (tmp.children) {
+            let childrenBaseUrl = ''
+            if (baseUrl == '') {
+                childrenBaseUrl = tmp.path
+            } else if (tmp.path != '') {
+                childrenBaseUrl = `${baseUrl}/${tmp.path}`
+            }
+            let childrenBreadcrumb = deepClone(breadcrumb)
+            if (route.meta.breadcrumb !== false) {
+                childrenBreadcrumb.push({
+                    path: childrenBaseUrl,
+                    title: route.meta.title
+                })
+            }
+            let tmpRoute = deepClone(route)
+            tmpRoute.path = childrenBaseUrl
+            tmpRoute.meta.breadcrumbNeste = childrenBreadcrumb
+            delete tmpRoute.children
+            res.push(tmpRoute)
+            let childrenRoutes = flatAsyncRoutes(tmp.children, childrenBreadcrumb, childrenBaseUrl)
+            childrenRoutes.map(item => {
+                // 如果 path 一样则覆盖，因为子路由的 path 可能设置为空，导致和父路由一样，直接注册会提示路由重复
+                if (res.some(v => v.path == item.path)) {
+                    res.forEach((v, i) => {
+                        if (v.path == item.path) {
+                            res[i] = item
+                        }
+                    })
+                } else {
+                    res.push(item)
+                }
+            })
+        } else {
+            if (baseUrl != '') {
+                if (tmp.path != '') {
+                    tmp.path = `${baseUrl}/${tmp.path}`
+                } else {
+                    tmp.path = baseUrl
+                }
+            }
+            // 处理面包屑导航
+            let tmpBreadcrumb = deepClone(breadcrumb)
+            if (tmp.meta.breadcrumb !== false) {
+                tmpBreadcrumb.push({
+                    path: tmp.path,
+                    title: tmp.meta.title
+                })
+            }
+            tmp.meta.breadcrumbNeste = tmpBreadcrumb
+            res.push(tmp)
+        }
+    })
+    return res
+}
+
 const state = {
     isGenerate: false,
     routes: [],
@@ -63,9 +123,18 @@ const actions = {
             commit('setHeaderActived', data.currentPath)
             let routes = []
             accessedRoutes.map(item => {
-                routes.push(item.children)
+                routes.push(...item.children)
             })
-            routes = routes.flat()
+            if (rootState.settings.enableFlatRoutes) {
+                routes.map(item => {
+                    if (item.children) {
+                        item.children = flatAsyncRoutes(item.children, [{
+                            path: item.path,
+                            title: item.meta.title
+                        }])
+                    }
+                })
+            }
             resolve(routes)
         })
     }