修改导航 和面包学 联动

src/components/dynamic-menu.vue

@@ -1,37 +1,47 @@
 <template>
-    <div class="menu-container">
-        <template v-for="v in menuList">
-            <el-submenu :index="v.name" v-if="v.children&&v.children.length>0" :key="v.name">
-                <template slot="title">
-                    <i class="iconfont" :class="v.meta.icon"></i>
-                    <span>{{v.meta.name}}</span>
-                </template>
-                <el-menu-item-group>
-                    <my-nav :menuList="v.children"></my-nav>
-                </el-menu-item-group>
-            </el-submenu>
-            <el-menu-item :key="v.name" :index="v.name" @click="gotoRoute(v.name)" v-else>
-                <i class="iconfont" :class="v.meta.icon"></i>
-                <span slot="title">{{v.meta.name}}</span>
-            </el-menu-item>
+  <div class="menu-container">
+    <template v-for="v in menuList">
+      <el-submenu
+        :index="v.path"
+        v-if="v.children && v.children.length > 0"
+        :key="v.name"
+      >
+        <template slot="title">
+          <i class="iconfont" :class="v.meta.icon"></i>
+          <span>{{ v.meta.name }}</span>
         </template>
-    </div>
+        <el-menu-item-group>
+          <my-nav :menuList="v.children"></my-nav>
+        </el-menu-item-group>
+      </el-submenu>
+      <el-menu-item
+        :key="v.name"
+        :index="v.path"
+        @click="gotoRoute(v.name, v.path)"
+        v-else
+      >
+        <i class="iconfont" :class="v.meta.icon"></i>
+        <span slot="title">{{ v.meta.name }}</span>
+      </el-menu-item>
+    </template>
+  </div>
 </template>
 <script>
 export default {
-    name: 'my-nav',
-    props: {
-        menuList: {
-            type: Array,
-            default: function() {
-                return []
-            }
-        }
+  name: "my-nav",
+  props: {
+    menuList: {
+      type: Array,
+      default: function () {
+        return [];
+      },
     },
-    methods: {
-        gotoRoute(name) {
-            this.$router.push({ name }) // push(path)  push({name:''})
-        }
-    }
-}
+  },
+  methods: {
+    gotoRoute(name, path) {
+      console.log(path, "path");
+      //this.$router.push({ name }); // push(path)  push({name:''})
+    },
+  },
+};
 </script>

src/components/index.js

@@ -8,4 +8,5 @@ Vue.component('MyTable', () => import('../components/MyTable'));
 Vue.component('MyForm', () => import('@c/myform/MyForm.vue'))
 Vue.component('DynamicMenu', () => import('@c/dynamicmenu/DynamicMenu.vue'))
 Vue.component('MyTable', () => import('@c/mytable/MyTable.vue'))
-Vue.component('MyPop', () => import('@c/mypop/MyPop.vue'))
+Vue.component('MyPop', () => import('@c/mypop/MyPop.vue'))
+Vue.component('MyBread', () => import('@c/mybread/MyBread.vue'))

src/components/mybread/MyBread.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <el-breadcrumb separator="/">
+      <el-breadcrumb-item :to="{ path: '/home' }">Dashboard</el-breadcrumb-item>
+      <el-breadcrumb-item v-for="(item, index) in levelList" :key="index">{{
+        item.meta.name
+      }}</el-breadcrumb-item>
+    </el-breadcrumb>
+    <!-- <div v-for="(item,index) in levelList">
+        {{item.path}}
+    </div> -->
+  </div>
+</template>
+<script>
+import { mapMutations } from "vuex";
+export default {
+  name: "my-bread",
+  props: {
+    tableData: {
+      type: Array,
+      require: true,
+      default: function () {
+        return [];
+      },
+    },
+  },
+
+  data() {
+    return {
+      levelList: [],
+    };
+  },
+
+  methods: {
+    ...mapMutations(["CURRENT_MENU"]),
+    getBreadcrumb() {
+      let matched = this.$route.matched.filter((item) => item.name);
+      matched.splice(0, 1);
+      // const first = matched[0];
+      // if (
+      //   first &&
+      //   first.name.trim().toLocaleLowerCase() !==
+      //     "Dashboard".toLocaleLowerCase()
+      // ) {
+      //   matched = [{ path: "/home", meta: { name: "dashboard" } }].concat(
+      //     matched
+      //   );
+      //   console.log(matched, "gaijian");
+      // }
+      this.levelList = matched;
+    },
+  },
+  watch: {
+    $route() {
+      this.getBreadcrumb();
+    },
+  },
+  created() {
+    this.getBreadcrumb();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/myform/MyForm.vue

@@ -122,7 +122,7 @@ export default {
   },
 
   mounted() {
-    console.log(this.formList, "sss");
+    //console.log(this.formList, "sss");
   },
 };
 </script>

src/components/mytable/MyTable.vue

@@ -130,7 +130,7 @@ export default {
   },
 
   mounted() {
-    console.log(this.tableConfigArr);
+    //console.log(this.tableConfigArr);
   },
 };
 </script>

src/pages/layout/component/main-content/top-aside.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="box">
     <el-row :gutter="20">
-      <el-col :span="17"><span>张三</span></el-col>
+      <el-col :span="17">
+        <my-bread></my-bread>
+      </el-col>
       <el-col :span="7">
         <el-row justify="end" type="flex" align="middle">
           <span>张三</span>

src/pages/layout/component/sidebar-nav.vue

@@ -1,32 +1,34 @@
 <template>
-    <el-menu
-        :collapse="isSidebarNavCollapse"
-        background-color="#304156"
-        text-color="#eee"
-        active-text-color="#4dbcff"
-        :default-active="currentMenu"
-    >
-        <DynamicMenu :menuList="sidebarMenu"></DynamicMenu>
-    </el-menu>
+  <el-menu
+    :collapse="isSidebarNavCollapse"
+    background-color="#304156"
+    text-color="#eee"
+    active-text-color="#4dbcff"
+    :default-active="$route.path"
+    router
+  >
+    <DynamicMenu :menuList="sidebarMenu"></DynamicMenu>
+  </el-menu>
 </template>
 
 <script>
-import DynamicMenu from '@/components/dynamic-menu'
-import { mapState } from 'vuex'
+import DynamicMenu from "@/components/dynamic-menu";
+import { mapState } from "vuex";
 
 export default {
-    data() {
-        return {
-            isCollapse: true
-        }
-    },
-    computed: {
-        ...mapState(['isSidebarNavCollapse']),
-        ...mapState('permission', ['sidebarMenu', 'currentMenu'])
-    },
-    methods: {},
-    components: {
-        DynamicMenu
-    }
-}
+  data() {
+    return {
+      isCollapse: true,
+    };
+  },
+  computed: {
+    ...mapState(["isSidebarNavCollapse"]),
+    ...mapState("permission", ["sidebarMenu", "currentMenu"]),
+  },
+  methods: {},
+
+  components: {
+    DynamicMenu,
+  },
+};
 </script>

src/pages/system/index.vue

@@ -0,0 +1,27 @@
+<template>
+    <div >
+        <div class="box">xsdsd</div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'page401',
+    data() {
+        return {}
+    },
+    methods: {
+        backToHome() {
+            this.$router.push('/')
+        }
+    },
+    computed: {
+        message() {
+            return 'sorry，您没有权限'
+        }
+    }
+}
+</script>
+<style  lang="scss" scoped>
+
+</style>

src/router/dynamic-router.js

@@ -11,6 +11,9 @@ const Goods = () => import('../pages/goods-manage')
 const GoodsList = () => import('../pages/goods-manage/goods-list')
 const GoodsClassify = () => import('../pages/goods-manage/goods-classify')
 
+/* 系统管理 */
+const System = () => import('../pages/system')
+
 /* 需要权限判断的路由 */
 const dynamicRoutes = [
     {
@@ -23,7 +26,7 @@ const dynamicRoutes = [
         },
         children: [
             {
-                path: 'list',
+                path: '/orderlist',
                 name: 'order-list',
                 component: OrderList,
                 meta: {
@@ -32,7 +35,7 @@ const dynamicRoutes = [
                 }
             },
             {
-                path: 'product',
+                path: '/product',
                 name: 'product-manage',
                 component: ProductManage,
                 meta: {
@@ -41,7 +44,7 @@ const dynamicRoutes = [
                 },
                 children: [
                     {
-                        path: 'list',
+                        path: '/productlist',
                         name: 'product-list',
                         component: ProductionList,
                         meta: {
@@ -50,7 +53,7 @@ const dynamicRoutes = [
                         }
                     },
                     {
-                        path: 'review',
+                        path: '/review',
                         name: 'review-manage',
                         component: ReviewManage,
                         meta: {
@@ -61,7 +64,7 @@ const dynamicRoutes = [
                 ]
             },
             {
-                path: 'returnGoods',
+                path: '/returnGoods',
                 name: 'return-goods',
                 component: ReturnGoods,
                 meta: {
@@ -81,7 +84,7 @@ const dynamicRoutes = [
         },
         children: [
             {
-                path: 'list',
+                path: '/goodslist',
                 name: 'goods-list',
                 component: GoodsList,
                 meta: {
@@ -90,7 +93,7 @@ const dynamicRoutes = [
                 }
             },
             {
-                path: 'classify',
+                path: '/classify',
                 name: 'goods-classify',
                 component: GoodsClassify,
                 meta: {
@@ -99,7 +102,17 @@ const dynamicRoutes = [
                 }
             }
         ]
+    },
+    {
+        path: '/system',
+        component: System,
+        name: 'system',
+        meta: {
+            name: '系统管理',
+            icon: 'icon-email'
+        },
     }
+
 ]
 
 export default dynamicRoutes

src/router/index.js

@@ -33,14 +33,14 @@ export const DynamicRoutes = [
         path:"",
         component:Layout,
         name:'container',
-        redirect:"home",
+        redirect:"/home",
         meta:{
             requiresAuth:true,
             name:"首页"
         },
         children:[
             {
-                path:"home",
+                path:"/home",
                 component:Home,
                 name:"home",
                 meta:{

src/router/permission.js

@@ -2,8 +2,6 @@ import router from "./index"
 import store from "../store/index"
 
 router.beforeEach((to, from, next) => {
-    console.log("全局路由");
-    console.log(store.state.user.token);
     if (!store.state.user.token) {
 
         //未登录  页面是否需要登录

src/store/modules/permission.js

@@ -21,6 +21,9 @@ export default {
         SET_MENU(state,menu){
             state.sidebarMenu = menu;
         },
+        CURRENT_MENU(state,menu){
+            state.currentMenu = menu;
+        },
         CLEAR_MENU(state){
             state.sidebarMenu = []
         }