增加路由菜单的权限化...

src/App.vue

@@ -7,12 +7,43 @@
 
 <script>
 import Sidebar from "./layout/Sidebar";
-
+import { getRolesMenu } from "@/api/login";
+import router, { constantRoutes } from "@/router";
 export default {
   name: "App",
   components: {
-    Sidebar: Sidebar
-  }
+    Sidebar: Sidebar,
+  },
+  created() {
+    this.asyncMenu();
+  },
+  methods: {
+    asyncMenu() {
+      /**
+        path: '/home',
+        name: 'home',
+        title: '首页',
+        component: () => import('@/views/home/home')
+       */
+      getRolesMenu().then((res) => {
+        console.log(res);
+        let asyncRouter = res.data.map((v) => {
+          return {
+            path: v.path,
+            name: v.name,
+            title: v.title,
+            component: () => import(`@/views/${v.url}`),
+          };
+        });
+        console.log(router);
+        console.log("asyncRouter");
+        console.log(asyncRouter);
+        let allRouter = constantRoutes.concat(asyncRouter);
+        router.addRoutes(allRouter);
+        router.options.routes = allRouter;
+      });
+    },
+  },
 };
 </script>
 

src/api/login.js

@@ -19,4 +19,11 @@ export function logout() {
         url: '/logout/',
         method: 'post'
     })
+}
+
+export function getRolesMenu() {
+    return request({
+        url: '/basic/user/menu/',
+        method: 'get'
+    })
 }

src/layout/Sidebar.vue

@@ -10,7 +10,7 @@
       :collapse="true"
       style="width:115px"
     >
-      <template v-for="(item, index) in routers">
+      <template v-for="(item, index) in getrouters.options.routes">
         <el-menu-item :index="item.path" :key="index">{{item.title}}</el-menu-item>
       </template>
     </el-menu>
@@ -28,13 +28,14 @@ export default {
     getrouters() {
       //路由表
       return Router;
-    }
+    },
   },
   created() {
-    console.log(Router);
-    this.routers = Router.options.routes;
-    console.log(this.routers);
-  }
+    console.log(111111111, this.$route);
+    // console.log(Router);
+    // this.routers = this.getrouters.options.routes;
+    // console.log(this.routers);
+  },
 };
 </script>
 <style></style>

src/router/index.js

@@ -9,47 +9,48 @@ export const constantRoutes = [
         name: 'home',
         title: '首页',
         component: () => import('@/views/home/home')
-    }, {
-        path: '/work',
-        name: 'work',
-        title: '作业',
-        component: () => import('@/views/work/work')
-    }, {
-        path: '/report',
-        name: 'report',
-        title: '日报',
-        component: () => import('@/views/report/report')
-    }, {
-        path: '/tree',
-        name: 'treeWork',
-        title: 'Tree树形控件',
-        component: () => import('@/views/treeDemo/tree')
-    }, {
-        path: '/treeandtable',
-        name: 'treeAndTable',
-        title: '7-22作业',
-        component: () => import('@/views/treeAndTable/tree_and_table')
-    }, {
-        path: '/payment',
-        name: 'payment',
-        title: '支出',
-        component: () => import('@/views/payment/payment')
-    }, {
-        path: '/map',
-        name: 'map',
-        title: '温州地图',
-        component: () => import('@/views/map/wenzhou_map')
-    }, {
-        path: '/map',
-        name: 'map',
-        title: '温州地图',
-        component: () => import('@/views/map/wenzhou_map')
-    }, {
-        path: '/zctjbb',
-        name: 'zctjbb',
-        title: '支出统计报表',
-        component: () => import('@/views/zctjbb/zctjbb')
-    }
+    },
+    // ,{
+    //     path: '/work',
+    //     name: 'work',
+    //     title: '作业',
+    //     component: () => import('@/views/work/work')
+    // }, {
+    //     path: '/report',
+    //     name: 'report',
+    //     title: '日报',
+    //     component: () => import('@/views/report/report')
+    // }, {
+    //     path: '/tree',
+    //     name: 'treeWork',
+    //     title: 'Tree树形控件',
+    //     component: () => import('@/views/treeDemo/tree')
+    // }, {
+    //     path: '/treeandtable',
+    //     name: 'treeAndTable',
+    //     title: '7-22作业',
+    //     component: () => import('@/views/treeAndTable/tree_and_table')
+    // }, {
+    //     path: '/payment',
+    //     name: 'payment',
+    //     title: '支出',
+    //     component: () => import('@/views/payment/payment'),
+    // }, {
+    //     path: '/map',
+    //     name: 'map',
+    //     title: '温州地图',
+    //     component: () => import('@/views/map/wenzhou_map')
+    // }, {
+    //     path: '/map',
+    //     name: 'map',
+    //     title: '温州地图',
+    //     component: () => import('@/views/map/wenzhou_map')
+    // }, {
+    //     path: '/zctjbb',
+    //     name: 'zctjbb',
+    //     title: '支出统计报表',
+    //     component: () => import('@/views/zctjbb/zctjbb')
+    // }
 
 
 ]