fix(menu): fail to match route item with relative path #662

Author: EmiyaYang

package.json

@@ -19,6 +19,7 @@
     "enquire.js": "^2.1.6",
     "lodash.get": "^4.4.2",
     "lodash.pick": "^4.4.0",
+    "lodash.clonedeep": "^4.5.0",
     "md5": "^2.2.1",
     "mockjs2": "1.0.8",
     "moment": "^2.24.0",

src/config/router.config.js

@@ -13,14 +13,14 @@ export const asyncRouterMap = [
     children: [
       // dashboard
       {
-        path: '/dashboard',
+        path: 'dashboard',
         name: 'dashboard',
         redirect: '/dashboard/workplace',
         component: RouteView,
         meta: { title: '仪表盘', keepAlive: true, icon: bxAnaalyse, permission: [ 'dashboard' ] },
         children: [
           {
-            path: '/dashboard/analysis',
+            path: 'analysis',
             name: 'Analysis',
             component: () => import('@/views/dashboard/Analysis'),
             meta: { title: '分析页', keepAlive: false, permission: [ 'dashboard' ] }
@@ -32,13 +32,13 @@ export const asyncRouterMap = [
             meta: { title: '监控页（外部）', target: '_blank' }
           },
           {
-            path: '/dashboard/workplace',
+            path: 'workplace',
             name: 'Workplace',
             component: () => import('@/views/dashboard/Workplace'),
             meta: { title: '工作台', keepAlive: true, permission: [ 'dashboard' ] }
           },
           {
-            path: '/dashboard/test-work',
+            path: 'test-work',
             name: 'TestWork',
             component: () => import('@/views/dashboard/TestWork'),
             meta: { title: '测试功能', keepAlive: true, permission: [ 'dashboard' ] }

src/layouts/BasicLayout.vue

@@ -70,6 +70,36 @@ import SideMenu from '@/components/Menu/SideMenu'
 import GlobalHeader from '@/components/GlobalHeader'
 import GlobalFooter from '@/components/GlobalFooter'
 import SettingDrawer from '@/components/SettingDrawer'
+import cloneDeep from 'lodash.clonedeep'
+
+function convertRoutes (nodes) {
+  if (!nodes) return null
+
+  nodes = cloneDeep(nodes)
+
+  let queue = Array.isArray(nodes) ? nodes.concat() : [nodes]
+
+  while (queue.length) {
+    const levelSize = queue.length
+
+    for (let i = 0; i < levelSize; i++) {
+      const node = queue.shift()
+
+      if (!node.children || !node.children.length) continue
+
+      node.children.forEach(child => {
+        // 转化相对路径
+        if (child.path[0] !== '/') {
+          child.path = node.path.replace(/(\w*)[/]*$/, `$1/${child.path}`)
+        }
+      })
+
+      queue = queue.concat(node.children)
+    }
+  }
+
+  return nodes
+}
 
 export default {
   name: 'BasicLayout',
@@ -109,7 +139,8 @@ export default {
     }
   },
   created () {
-    this.menus = this.mainMenu.find(item => item.path === '/').children
+    const routes = convertRoutes(this.mainMenu.find(item => item.path === '/'))
+    this.menus = (routes && routes.children) || []
     this.collapsed = !this.sidebarOpened
   },
   mounted () {

yarn.lock

@@ -7037,6 +7037,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash.clonedeep@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
+  integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
+
 lodash.defaultsdeep@^4.6.1:
   version "4.6.1"
   resolved "https://registry.npm.taobao.org/lodash.defaultsdeep/download/lodash.defaultsdeep-4.6.1.tgz#512e9bd721d272d94e3d3a63653fa17516741ca6"