修改优化以及修复动态生成的菜单栏点击和刷新页面不高亮问题

src/layout/components/Sidebar/index.vue

@@ -29,12 +29,11 @@ import menusdata from './leftMenusData.js'
 import { mirlist } from '@/api/user'
 
 //console.log(menusdata);
+var dfdg = 10;
 export default {
   components: { SidebarItem, Logo },
   created: function () {
     this.getmunusdata();
-    //this.menusdatas = ''
-    var fe = 10;
   },
   data() {
     return {
@@ -48,12 +47,23 @@ export default {
     // routes() {
     //   return this.$router.options.routes
     // },
+
+    // 获取当前激活菜单的index，默认选中的菜单
     activeMenu() {
       const route = this.$route
       const { meta, path } = route
+      const menusindex = window.location.href
+
+      //  因为菜单栏的生成和路由是解耦的，因为动态获取以及添加的菜单都是用的同一个path带不同参数，路由没法获取，所以通过获取地址来选中
+      let getcan = menusindex.split('?id');
+      if (getcan[1]) {
+        //console.log(menusindex.split('/#'));
+        return menusindex.split('/#')[1]
+      }
+      
       // if set path, the sidebar will highlight the path you set
       if (meta.activeMenu) {
-        return meta.activeMenu
+        return meta.activeMenu  //当前激活的菜单
       }
       return path
     },
@@ -77,39 +87,29 @@ export default {
             //     this.$set(this.menusdata,'children', [])
             //     //menusdata[0].children = []
             // }
-            
             newMenu = {
-                path: '/subfile?id='+item.id,
-                meta: { title: item.directory, icon: 'dashboard' },
+                path: '/filemange/subfile?id='+item.id,
+                meta: { title: item.directory, activeMenu:'subfile?id='+item.id, icon: 'dashboard' },
                 children:[]
             }
-            //console.log(item.directories.length);
             if (item.directories && item.directories.length > 0) {
-                newMenu.children = this.SplicingMenuTree(item.directories,)
+                newMenu.children = this.SplicingMenuTree(item.directories)
             }
 
-            arrMenus.push(newMenu);
-            //console.log(arrMenus);
-            
+            arrMenus.push(newMenu);    
         });
         return arrMenus;
      },
 
      getmunusdata() {
         let thiss = this;
-        // console.log(this.$route);
+        //console.log(this.$route);
         // console.log(this.$store);
         
         mirlist().then(response => {
             let datamain = response.data;
-            //routesData(datamain.data.menus);
-            //console.log(response);
-            console.log(this.menusdatas);
-            menusdata[0].children = this.SplicingMenuTree(datamain.data.menus);
-            //menusdatas[0] = addmunst
-            console.log(menusdata);
-            //this.routes = menusdata
-            //console.log(menusdata);
+            
+            this.routes[0].children = this.SplicingMenuTree(datamain.data.menus);
 
         }).catch(function (error) {
             thiss.$message({

src/layout/components/Sidebar/leftMenusData.js

@@ -8,19 +8,19 @@ var menusdata =  [
     //     meta: { title: '文件管理', icon: 'dashboard' },
     //     children: [
     //         {
-    //             path: '/subfile',
+    //             path: '/filemange/subfile?id=0',
     //             meta: { title: 'Menu1-1' }
     //         },
     //         {
-    //             path: '/subfile',
+    //             path: '/filemange/subfile',
     //             meta: { title: 'Menu1-2' },
     //             children: [
     //                 {
-    //                     path: '/subfile',
+    //                     path: '/filemange/subfile?id=1',
     //                     meta: { title: 'Menu1-2-1' }
     //                 },
     //                 {
-    //                     path: '/subfile',
+    //                     path: '/filemange/subfile',
     //                     meta: { title: 'Menu1-2-2' }
     //                 }
     //             ]
@@ -56,6 +56,11 @@ var menusdata =  [
             }
         ]
     },
+    {
+        path: 'https://dev.filesite.io/',
+        meta: { title: '前端展示页面', icon: 'dashboard' }
+
+    }
 ]
 
 export default menusdata

src/router/index.js

@@ -44,16 +44,22 @@ export const constantRoutes = [
     hidden: true
   },
     {
-        path: '/',
+        path: '/filemange',
         component: Layout,
         name: 'filemange',
         meta: { title: '文件管理', icon: 'el-icon-s-help' },
         children: [
             {
-                path: 'filemange',
-                name: 'Filemange',
+                path: 'createDirectory',
+                name: 'CreateDirectory',
                 component: () => import('@/views/filemange/index'),
-                meta: { title: '文件管理', icon: 'dashboard' }
+                meta: { title: '创建目录', icon: 'dashboard' }
+            },
+            {
+                path: 'subfile',
+                name: 'Subfile',
+                component: () => import('@/views/subfile/index'),
+                meta: { title: '子文件', icon: 'dashboard' }
             }
         ]
     },
@@ -67,16 +73,16 @@ export const constantRoutes = [
             meta: { title: '用户管理', icon: 'dashboard' }
         }]
     },
-    {
-        path: '/',
-        component: Layout,
-        children: [{
-            path: 'subfile',
-            name: 'Subfile',
-            component: () => import('@/views/subfile/index'),
-            meta: { title: '文件管理', icon: 'dashboard' }
-        }]
-    },
+    // {
+    //     path: '/',
+    //     component: Layout,
+    //     children: [{
+    //         path: 'subfile',
+    //         name: 'Subfile',
+    //         component: () => import('@/views/subfile/index'),
+    //         meta: { title: '文件管理', icon: 'dashboard' }
+    //     }]
+    // },
     {
         path: '/systme',
         component: Layout,

src/settings.js

@@ -1,6 +1,6 @@
 module.exports = {
 
-  title: 'Vue Admin Template',
+  title: '嘉洛马',
 
   /**
    * @type {boolean} true | false