refactor(sidebar-item): optimizate SiderbarItem.

src/router/index.js

@@ -210,7 +210,7 @@ export const asyncRouterMap = [
     },
     children: [
       {
-        path: '/nested/bar', // Must write the full path
+        path: 'bar',
         component: () => import('@/views/nested/bar/index'), // Parent router-view
         name: 'bar',
         meta: { title: 'bar' },
@@ -226,6 +226,26 @@ export const asyncRouterMap = [
             component: () => import('@/views/nested/bar/posts'),
             name: 'bar-posts',
             meta: { title: 'barPosts' }
+          },
+          {
+            path: 'foo',
+            component: () => import('@/views/nested/bar/foo'),
+            name: 'bar-foo',
+            meta: { title: 'Foo' },
+            children: [
+              {
+                path: 'ant',
+                component: () => import('@/views/nested/bar/foo/Ant'),
+                name: 'bar-foo-ant',
+                meta: { title: 'Ant' }
+              },
+              {
+                path: 'ant2',
+                component: () => import('@/views/nested/bar/foo/Ant2'),
+                name: 'bar-foo-ant2',
+                meta: { title: 'Ant2' }
+              }
+            ]
           }
         ]
       }

src/views/layout/components/Sidebar/SidebarItem.vue

@@ -1,26 +1,25 @@
 <template>
   <div class="menu-wrapper">
-    <template v-for="item in routes" v-if="!item.hidden&&item.children">
+    <template v-if="!item.hidden&&item.children">
 
-      <router-link v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&!item.alwaysShow" :to="item.path+'/'+item.children[0].path"
+      <router-link v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&!item.alwaysShow" :to="resolvePath(item.children[0].path)">
-        :key="item.children[0].name">
+        <el-menu-item :index="resolvePath(item.children[0].path)" :class="{'submenu-title-noDropdown':!isNest}">
-        <el-menu-item :index="item.path+'/'+item.children[0].path" :class="{'submenu-title-noDropdown':!isNest}">
           <svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>
           <span v-if="item.children[0].meta&&item.children[0].meta.title" slot="title">{{generateTitle(item.children[0].meta.title)}}</span>
         </el-menu-item>
       </router-link>
 
-      <el-submenu v-else :index="item.name||item.path" :key="item.name">
+      <el-submenu v-else :index="item.name||item.path">
         <template slot="title">
           <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
           <span v-if="item.meta&&item.meta.title" slot="title">{{generateTitle(item.meta.title)}}</span>
         </template>
 
         <template v-for="child in item.children" v-if="!child.hidden">
-          <sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :routes="[child]" :key="child.path"></sidebar-item>
+          <sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :item="child" :key="child.path" :base-path="resolvePath(child.path)"></sidebar-item>
 
-          <router-link v-else :to="item.path+'/'+child.path" :key="child.name">
+          <router-link v-else :to="resolvePath(child.path)" :key="child.name">
-            <el-menu-item :index="item.path+'/'+child.path">
+            <el-menu-item :index="resolvePath(child.path)">
               <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
               <span v-if="child.meta&&child.meta.title" slot="title">{{generateTitle(child.meta.title)}}</span>
             </el-menu-item>
@@ -33,17 +32,23 @@
 </template>
 
 <script>
+import path from 'path'
 import { generateTitle } from '@/utils/i18n'
 
 export default {
   name: 'SidebarItem',
   props: {
-    routes: {
+    item: { // route配置json
-      type: Array
+      type: Object,
+      required: true
     },
     isNest: {
       type: Boolean,
       default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
     }
   },
   methods: {
@@ -56,6 +61,9 @@ export default {
       }
       return false
     },
+    resolvePath(...paths) {
+      return path.resolve(this.basePath, ...paths)
+    },
     generateTitle
   }
 }

src/views/layout/components/Sidebar/index.vue

@@ -9,7 +9,7 @@
       text-color="#bfcbd9"
       active-text-color="#409EFF"
     >
-      <sidebar-item :routes="permission_routers"></sidebar-item>
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"></sidebar-item>
     </el-menu>
   </el-scrollbar>
 </template>

src/views/nested/bar/foo/Ant.vue

@@ -0,0 +1,6 @@
+<template>
+  <div style="padding:30px;">
+    <el-alert title="Children: Ant" :closable="false">
+    </el-alert>
+  </div>
+</template>

src/views/nested/bar/foo/Ant2.vue

@@ -0,0 +1,6 @@
+<template>
+  <div style="padding:30px;">
+    <el-alert title="Children: Ant2" :closable="false">
+    </el-alert>
+  </div>
+</template>

src/views/nested/bar/foo/index.vue

@@ -0,0 +1,6 @@
+<template>
+  <div style="padding:30px;">
+    <code>Parent View: Foo</code>
+    <router-view></router-view>
+  </div>
+</template>

src/views/nested/bar/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <code>Parent View: Bar</code>
-    <img src="https://wpimg.wallstcn.com/be29a7d2-5ccf-4a2b-888d-8a6c2bbb7aac.png">
+    <!-- <img src="https://wpimg.wallstcn.com/be29a7d2-5ccf-4a2b-888d-8a6c2bbb7aac.png"> -->
     <router-view></router-view>
   </div>
 </template>

src/views/nested/bar/posts.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="margin-top:30px;">
+  <div style="padding:30px;">
     <el-alert title="Children: Posts" type="warning" :closable="false">
     </el-alert>
   </div>

src/views/nested/bar/profile.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="margin-top:30px;">
+  <div style="padding:30px;">
     <el-alert title="Children: Profile" type="success" :closable="false">
     </el-alert>
   </div>