修改。增加左侧菜单栏点击父菜单也可显示文件内容，修复外链跳转当前页面404问题

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "axios": "^1.1.2",
+    "core-js": "3.6.5",
     "element-ui": "2.13.2",
     "js-cookie": "2.2.0",
     "normalize.css": "7.0.0",

src/components/Breadcrumb/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-breadcrumb class="app-breadcrumb" separator=">">
+  <el-breadcrumb class="app-breadcrumb" separator-class="el-icon-arrow-right">
     <transition-group name="breadcrumb">
       <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
         <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
@@ -30,11 +30,13 @@ export default {
   methods: {
     getBreadcrumb() {
       // only show routes with meta.title
+      
       let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
+      console.log(this.$route);
       const first = matched[0]
 
       if (!this.isDashboard(first)) {
-        // matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
+         //matched = [{ path: '/homepage', meta: { title: 'Dashboard' }}].concat(matched)
         matched = [{ path: '/dashboard', meta: { title: '' }}].concat(matched)
       }
 

src/layout/components/Sidebar/Link.vue

@@ -20,6 +20,7 @@ export default {
     },
     type() {
       if (this.isExternal) {
+        //console.log(this.isExternal);
         return 'a'
       }
       return 'router-link'

src/layout/components/Sidebar/Logo.vue

@@ -25,7 +25,7 @@ export default {
   data() {
     return {
       title: '嘉洛马',
-      logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
+      logo: 'https://static.jialuoma.cn/img/logo_jialuoma.png'
     }
   }
 }

src/layout/components/Sidebar/SidebarItem.vue

@@ -5,13 +5,26 @@
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
           <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
-
         </el-menu-item>
       </app-link>
     </template>
     
     <template v-else>
-        <a v-if="item.class && item.class == 'file'" :href="'#'+resolvePath(item.path)" >
+        <a class="el_submenu_link" :index="resolvePath(item.path)" v-if="item.class && item.class == 'file'" :href="'#'+resolvePath(item.path)"></a>
+        <el-submenu ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
+            <template slot="title">
+                <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
+            </template>
+            <sidebar-item
+                v-for="child in item.children"
+                :key="child.path"
+                :is-nest="true"
+                :item="child"
+                :base-path="resolvePath(child.path)"
+                class="nest-menu"
+            />
+        </el-submenu>
+        <!-- <a v-if="item.class && item.class == 'file'" :href="'#'+resolvePath(item.path)" >
             <el-submenu ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
                 <template slot="title">
                     <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
@@ -38,7 +51,7 @@
                 :base-path="resolvePath(child.path)"
                 class="nest-menu"
             />
-        </el-submenu>
+        </el-submenu> -->
     </template >
   </div>
 </template>
@@ -102,12 +115,17 @@ export default {
       return false
     },
     resolvePath(routePath) {
+
       if (isExternal(routePath)) {
         return routePath
       }
+      //console.log(this.basePath);
+      //console.log(routePath);
       if (isExternal(this.basePath)) {
+        //console.log(this.basePath);
         return this.basePath
       }
+     
       return path.resolve(this.basePath, routePath)
     }
   }

src/layout/components/Sidebar/index.vue

@@ -3,7 +3,6 @@
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
-        :router="true"
         :default-active="activeMenu"
         :collapse="isCollapse"
         :background-color="variables.menuBg"
@@ -53,12 +52,9 @@ export default {
       const route = this.$route
       const { meta, path } = route
       const menusindex = window.location.href
-
+        console.log(1);
       //  因为菜单栏的生成和路由是解耦的，因为动态获取以及添加的菜单都是用的同一个path带不同参数，路由没法获取，所以通过获取地址来选中
-      //let getcan = menusindex.split('?id');
-      //console.log(menusindex.indexOf('?id'));
       if (menusindex.indexOf('?id') != -1) {
-        //console.log(menusindex.split('/#'));
         return menusindex.split('/#')[1]
       }
       
@@ -89,7 +85,7 @@ export default {
             //     //menusdata[0].children = []
             // }
             newMenu = {
-                path: '/subfile?id='+item.id,
+                path: '/filemange/subfile?id='+item.id,
                 meta: { title: item.directory },
                 class: 'file',
                 children:[]

src/layout/components/Sidebar/leftMenusData.js

@@ -36,14 +36,14 @@ var menusdata =  [
     
     {
         id: '1',
-        path: '/filemange',
+        path: '/filemange/index',
         class: 'file',
-        meta: { title: '文件管理', icon: 'dashboard' },
+        meta: { title: '文件管理', icon: 'el-icon-s-help' },
         children:[]
     },
     {
-        path: '/usermange',
-        meta: { title: '用户管理', icon: 'dashboard' }
+        path: '/usermange/index',
+        meta: { title: '用户管理', icon: 'form' }
        
     },
     {
@@ -65,8 +65,8 @@ var menusdata =  [
         ]
     },
     {
-        path: 'https://dev.filesite.io/',
-        meta: { title: '前端展示页面', icon: 'dashboard' }
+        path: 'https://dev.filesite.io',
+        meta: { title: '前端展示页面', icon: 'link' }
 
     }
 ]

src/peizhi.js

@@ -0,0 +1,5 @@
+let peizhi = {
+    dizhi: 'http://192.168.0.100'
+}
+
+export default peizhi

src/router/index.js

@@ -46,6 +46,7 @@ export const constantRoutes = [
     {
         path: '/',
         component: Layout,
+        redirect: '/homepage',
         children: [{
             path: 'homepage',
             name: 'Homepage',
@@ -54,13 +55,14 @@ export const constantRoutes = [
         }]
     },
     {
-        path: '/',
+        path: '/filemange',
         component: Layout,
+        redirect: '/filemange/index',
         meta: { title: '文件管理', icon: 'el-icon-s-help' },
         children: [
             {
-                path: 'filemange',
-                name: 'filemange',
+                path: 'index',
+                name: 'Filemange',
                 component: () => import('@/views/filemange/index'),
                 meta: { title: '', icon: 'dashboard' }
             },
@@ -73,28 +75,22 @@ export const constantRoutes = [
         ]
     },
     {
-        path: '/',
+        path: '/usermange',
         component: Layout,
-        children: [{
-            path: 'usermange',
+        name: 'usermange',
+        children: [
+            {
+                path: 'index',
                 name: 'Usermange',
                 component: () => import('@/views/usermanage/index'),
-            meta: { title: '用户管理', icon: 'dashboard' }
-        }]
+                meta: { title: '用户管理', icon: 'form' }
+            }
+        ]
     },
-    // {
-    //     path: '/',
-    //     component: Layout,
-    //     children: [{
-    //         path: 'subfile',
-    //         name: 'Subfile',
-    //         component: () => import('@/views/subfile/index'),
-    //         meta: { title: '文件管理', icon: 'dashboard' }
-    //     }]
-    // },
     {
         path: '/systme',
         component: Layout,
+        redirect: '/systme/changepass',
         name: 'systme',
         meta: { title: '系统管理', icon: 'el-icon-s-help' },
         children: [
@@ -118,77 +114,24 @@ export const constantRoutes = [
             }
         ]
     },
-    {
-        path: 'external-link',
-        component: Layout,
-        children: [
-            {
-                path: 'https://dev.filesite.io/',
-                meta: { title: '前端展示页面', icon: 'link' }
-            }
-        ]
-    },
     
-  // 404 page must be placed at the end !!!
     { path: '*', redirect: '/404', hidden: true }
+  // 404 page must be placed at the end !!!
+  
 ]
 
-const createRouter = (a) => new Router({
-  //mode: 'history', // require service support
+const createRouter = () => new Router({
+   //mode: 'history', // require service supportmode: 'history',
   scrollBehavior: () => ({ y: 0 }),
-    routes: a
+  routes: constantRoutes
 })
 
-//let router
-const router = createRouter(constantRoutes)
-// 动态添加路由
-// import { mirlist } from '@/api/user'
-// let pachs = () => import('@/views/filemange/index');
-// mirlist().then(response => {
-//     let datamain = response.data;
-//     //routesData(datamain.data.menus);
-//     //console.log(response);
-//     datamain.data.menus.forEach(item => {
-//         menus.push(
-//             {
-//                 path: item.directory,
-//                 name: item.directory,
-//                 component: pachs,
-//                 meta: { title: item.directory, icon: 'dashboard' }
-//             }
-//         );
-//     });
-//     //console.log(menus);
-//     //router = createRouter(constantRoutes)
-//     console.log(router.options);
-//     router = createRouter(constantRoutes)
-//     // {
-//     //     path: 'filemange',
-//     //     name: 'Filemange',
-//     //     component: () => import('@/views/filemange/index'),
-//     //     meta: { title: '文件管理', icon: 'dashboard' }
-//     // }
-
-// }).catch(function (error) {
-//     Message({
-//         showClose: true,
-//         message: error,
-//         type: 'error'
-//     });
-// });
-//router = createRouter(constantRoutes)
-//router.addRoutes(constantRoutes);
-
+const router = createRouter()
 
 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
 export function resetRouter() {
   const newRouter = createRouter()
-  router.matcher = newRouter.matcher // reset router 重置路由器
+  router.matcher = newRouter.matcher // reset router
 }
-// router.reloadRouter = function () {
-//     router.matcher = new Router({
-//         mode: "history",
-//         constantRoutes
-//     }).matcher
-// }
+
 export default router

src/styles/element-ui.scss

@@ -47,3 +47,5 @@
 .el-range-separator {
   box-sizing: content-box;
 }
+
+.el-submenu__title i{color:#FFF;}

src/styles/sidebar.scss

@@ -20,6 +20,10 @@
     z-index: 2002;
     overflow: hidden;
 
+    .el_submenu_link{width:76%;height:56px;z-index:100;position:absolute;left:0;top:0;bottom:0;right:10%;}
+    .el_submenu_link:hover{background-color:rgba(0, 0, 0, 0.3);}
+
+
     // reset element-ui css
     .horizontal-collapse-transition {
       transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
@@ -67,14 +71,15 @@
       height: 100%;
       width: 100% !important;
     }
+    .el-menu>div{position:relative;}
 
     // menu hover
-    .submenu-title-noDropdown,
-    .el-submenu__title {
-      &:hover {
-        background-color: $menuHover !important;
-      }
-    }
+    // .submenu-title-noDropdown,
+    // .el-submenu__title {
+    //   &:hover {
+    //     background-color: $menuHover !important;
+    //   }
+    // }
 
     .is-active>.el-submenu__title {
       color: $subMenuActiveText !important;