update

mock/menu.js

@@ -42,7 +42,7 @@ export default [
         {
           name: 'testList',
           title: '列表',
-        },
+          children: [
             {
               name: 'testAdd',
               title: '添加',
@@ -51,6 +51,9 @@ export default [
               name: 'testEdit',
               title: '编辑',
             },
+          ]
+        },
+        
         // {
         //   name: 'testAuth',
         //   title: '权限测试',

package.json

@@ -21,7 +21,7 @@
   ],
   "dependencies": {
     "axios": "^0.21.1",
-    "vue": "3.2.33",
+    "vue": "^3.2.33",
     "vue-router": "^4.0.5",
     "vuex": "^4.0.0",
     "pinia": "^2.0.14"

src/App.vue

@@ -39,8 +39,8 @@
 <script>
 import { defineComponent } from 'vue'
 import { ElConfigProvider } from 'element-plus'
-import localeZH from 'element-plus/lib/locale/lang/zh-cn'
+import localeZH from 'element-plus/es/locale/lang/zh-cn'
-import localeEN from 'element-plus/lib/locale/lang/en'
+import localeEN from 'element-plus/es/locale/lang/en'
 import useLang from '@/i18n/useLang'
 
 export default defineComponent({

src/layout/components/Sidebar/Menus.vue

@@ -58,6 +58,7 @@ import { useRoute } from 'vue-router'
 import config from './config/menu.module.scss'
 import { storeToRefs } from 'pinia'
 import { useMenus } from '@/pinia/modules/menu'
+import { useApp } from '@/pinia/modules/app'
 
 export default defineComponent({
   components: {
@@ -76,10 +77,16 @@ export default defineComponent({
   setup() {
     const route = useRoute()
     const { menus } = storeToRefs(useMenus())
+    const appStore = useApp()
+    const { matchedRoutes } = storeToRefs(appStore)
 
     return {
       menus,
-      activePath: computed(() => route.path),
+      activePath: computed(() => {
+        return matchedRoutes.value.length > 1
+          ? matchedRoutes.value[1].path
+          : route.path
+      }),
       variables: computed(() => config),
     }
   },

src/layout/components/Topbar/Breadcrumbs.vue

@@ -71,7 +71,8 @@ import { useRouter } from 'vue-router'
 export default defineComponent({
   setup(props, { emit }) {
     const { proxy } = getCurrentInstance()
-    const { device } = storeToRefs(useApp())
+    const appStore = useApp()
+    const { device } = storeToRefs(appStore)
     const router = useRouter()
     const route = router.currentRoute // 这里不使用useRoute获取当前路由，否则下面watch监听路由的时候会有警告
     const breadcrumbs = ref([])
@@ -80,16 +81,37 @@ export default defineComponent({
       () => defaultSettings.menus.mode === 'horizontal'
     )
 
+    const allRoutes = router.getRoutes()
+
+    const recursionArr = (matched, route) => {
+      const parent = route.meta.parent
+      if (parent) {
+        const parentRoute = allRoutes.find(item => item.name === parent)
+        if (parentRoute && parentRoute.meta && parentRoute.meta.title) {
+          matched.splice(
+            matched.findIndex(item => item.name === route.name),
+            0,
+            parentRoute
+          )
+          recursionArr(matched, parentRoute)
+        }
+      }
+    }
+
     const getBreadcrumbs = route => {
       const home = [{ path: '/', meta: { title: proxy.$t('menu.homepage') } }]
       if (route.name === 'home') {
+        appStore.setMatchedRoutes(home)
         return home
       } else {
         const matched = route.matched.filter(
           item => !!item.meta && !!item.meta.title
         )
 
-        return [...home, ...matched]
+        // return [...home, ...matched]
+        recursionArr(matched, route)
+        appStore.setMatchedRoutes(matched)
+        return matched
       }
     }
 

src/permission.js

@@ -35,8 +35,7 @@
 
 import { ElLoading } from 'element-plus'
 import router from '@/router'
-// import store from '@/store'
+import { TOKEN } from './pinia/modules/app' // TOKEN变量名
-import { TOKEN } from '@/store/modules/app' // TOKEN变量名
 import { nextTick } from 'vue'
 import { useApp } from './pinia/modules/app'
 import { useAccount } from './pinia/modules/account'

src/pinia/modules/app.js

@@ -28,6 +28,7 @@ export const useApp = defineStore('app', {
       collapse: getItem(COLLAPSE),
     },
     device: 'desktop',
+    matchedRoutes: [],
   }),
   actions: {
     setCollapse(data) {
@@ -42,6 +43,9 @@ export const useApp = defineStore('app', {
     setDevice(device) {
       this.device = device
     },
+    setMatchedRoutes(payload) {
+      this.matchedRoutes = payload
+    },
     setToken(data) {
       this.authorization = data
       // 保存到localStorage

src/pinia/modules/menu.js

@@ -58,8 +58,8 @@ export const useMenus = defineStore('menu', () => {
           icon: item.icon,
         }
         if (item.children) {
-          if (item.children.filter(child => !child.hidden).length <= 1) {
+          if (item.children.filter(child => !child.hidden).length <= 0) {
-            menu.url = generateUrl(item.children[0].path, menu.url)
+            delete menu.children
           } else {
             menu.children = getFilterMenus(item.children, menu.url)
           }
@@ -71,6 +71,47 @@ export const useMenus = defineStore('menu', () => {
     return menus
   }
 
+  // 扁平化树形数据
+  const flattenTree = tree => {
+    let result = []
+    tree.forEach(node => {
+      result.push(node) // 将当前节点添加到结果数组中
+      if (node.children && node.children.length) {
+        // 如果有子节点，将子节点添加到结果数组中
+        result = result.concat(flattenTree(node.children))
+        delete node.children
+      }
+    })
+    return result
+  }
+
+  const optimizeRoutes = (arr, parentPath = '', parentName = '') => {
+    return arr.map(obj => {
+      const item = {
+        ...obj,
+      }
+      item.path = item.path.startsWith('/')
+        ? item.path
+        : parentPath
+        ? `${parentPath}/${item.path}`
+        : item.path
+      if (parentName) {
+        item.meta.parent = parentName
+      }
+      if (item.children) {
+        item.children = optimizeRoutes(item.children, item.path, item.name)
+      }
+      return item
+    })
+  }
+
+  const formatRoutes = routes => {
+    return routes.map(route => ({
+      ...route,
+      children: flattenTree(optimizeRoutes(route.children || [])),
+    }))
+  }
+
   const menus = ref([])
   const setMenus = data => {
     menus.value = data
@@ -91,11 +132,14 @@ export const useMenus = defineStore('menu', () => {
       })
       // 过滤出需要添加的动态路由
       const filterRoutes = getFilterRoutes(asyncRoutes, data)
-      filterRoutes.forEach(route => router.addRoute(route))
 
       // 生成菜单
       const menus = getFilterMenus([...fixedRoutes, ...filterRoutes])
       setMenus(menus)
+
+      // 添加动态路由，由于只做了二级路由，所以需要将三级之后的children提到二级
+      const arr = formatRoutes(filterRoutes)
+      arr.forEach(route => router.addRoute(route))
     }
   }
   return {

src/router/modules/test.js

@@ -39,7 +39,7 @@ export default [
         meta: {
           title: 'menu.testList',
         },
-      },
+        children: [
           {
             path: 'add',
             name: 'testAdd',
@@ -58,6 +58,9 @@ export default [
             },
             hidden: true, // 不在菜单中显示
           },
+        ],
+      },
+
       // {
       //   path: 'auth',
       //   name: 'testAuth',

src/views/test/Nest.vue

@@ -1,5 +1,3 @@
 <template>
-  <h1>二级菜单</h1>
+  nest
-  <h3>二级菜单的页面是不会缓存的</h3>
-  <router-view />
 </template>

src/views/test/error-log/index.vue

@@ -18,7 +18,7 @@
       本页面主动抛出了错误（任何页面报错都会记录到错误日志中），现在你可以点击右上角的`debugger`图标查看错误日志
     </h4>
     <div>
-      你可以在`store/modules/errorLog.js`的`addErrorLog`方法中将错误上报到服务器
+      你可以在`pinia/modules/errorLog.js`的`addErrorLog`方法中将错误上报到服务器
     </div>
     <br />
     <div>