vue动态路由的使用

瞬杀★弑龙

项目创立过程当中常常碰到的一个需供便是权限办理，本文便我正在利用静态路由的过程当中举办一个总结

起首，前端念要完成对菜单的静态衬着实践上有两种操纵方法

  1.前端仍是誊写静态路由表，按照后端传去的code利用v-if来判定衬着菜单项
实践这类利用方法其实不可与，由于没有便利前期保护。
2.前端只写出有权限掌握的login，register, 404 页里的路由，其他路由则是按照后端传过去的，拼接进路由表。

那里我正在项目中利用的第两种办法

  起首，我们要先了解静态路由表的恳求战增加皆是发作正在路由保卫里边的。
没有空话间接上代码

1. const whiteList = ["/login", "/register"];  // 利剑名单，没有需求token也能够进进的页里
2. router.beforeEach(async (to, from, next) => {
3.   NProgress.start();
4.   // document.title = to.meta.title;
5.   // 获得用户token，用去判定当前用户能否登录
6.   const hasToken = getToken();
7.   if (hasToken) {
8.     if (whiteList.indexOf(to.path) !== -1) {
9.       next();
10.       NProgress.done();
11.     } else {
12.       // 用去获得背景拿到的路由
13.       const route = await store.getters.addRouters;
14.       // console.log("to.path", to.path, route);
15.       if (route && route.length > 0) {
16.         if (to.path === "/") {
17.           next("/console");
18.         }
19.         next();
20.         NProgress.done();
21.       } else {
22.         store.dispatch("queryMenuList").then(({ servers }) => {
23.           // console.log("拿到的初初路由构造", servers);
24.           filterAsyncRouter(servers);
25.           const menus = store.getters.addRouters;
26.           const routerMap = newRouter(menus);
27.           for (let key in routerMap) {
28.             router.addRoute("layout", routerMap[key]);
29.           }
30.           router.addRoute({ // 那里是对404页里的一个重定背
31.             path: "*",
32.             redirect: "/404",
33.             hidden: true,
34.           });
35.           let homeChildren = router.options.routes[2];
36.           // homeChildren = menus
37.           homeChildren["children"] = routerMap;
38.           // console.log("终极的", menus);
39.           next({
40.             ...to,
41.             replace: true,
42.           }); // hack办法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
43.           NProgress.done();
44.         });
45.       }
46.       next();
47.       NProgress.done();
48.     }
49.   } else {
50.     if (whiteList.indexOf(to.path) !== -1) {
51.       // 需求跳转的路由能否是whiteList中的路由，如果，则间接条状
52.       next();
53.     } else {
54.       // 需求跳转的路由没有是whiteList中的路由，间接跳转到登录页
55.       // console.log("redirect",to.fullPath)
56.       next("/login?redirect=" + to.fullPath);
57.       // 完毕粗度条
58.       NProgress.done();
59.     }
60.   }
61. });

复造代码

  store.dispatch(“queryMenuList”)那里是我正在vuex中界说的恳求静态路由表的办法；

filterAsyncRouter办法

  从后端间接恳求过去的静态路由表常常是不克不及间接利用的，我们需求把他的数据构造转换成我们前端路由表的构造。而且把组件对应到路由中来。

1. const _import = require("@/router/_import_" + process.env.NODE_ENV); //获得组件的办法
2. function filterAsyncRouter(asyncRouterMap) {
3.   // 过滤静态路由
4.   const newArr = [];
5.   asyncRouterMap.forEach((item) => {
6.     const component = _import(item.component);
7.     // console.log("component", component, item.component ,item.path);
8.     let routerTemplate = {
9.       name: item.serverName,
10.       id: item.id,
11.       path: item.path,
12.       component,
13.     };
14.     if (item.children && item.children.length > 0) {
15.       routerTemplate.children = filterRouter(item.children);
16.     }
17.     newArr.push(routerTemplate);
18.   });
19.   return newArr;
20. }

复造代码

  _import是引进组件的办法，具体感化便是把组件对应到路由表中来

1. module.exports = (file) => {
2.   // console.log("传出去的组件地点", file);
3.   var a = true;
4.   try {
5.     // (resolve) => require("@/views/" + file + "/index.vue", resolve)
6.     return require("@/views/" + file + "/index.vue").default;
7.   } catch (e) {
8.     a = false;
9.   }
10.   if (a) {
11.     // console.log("要找的地点2", "@/views/" + file + "/index.vue");
12.     return require("@/views/" + file + "/index.vue").default;
13.   }
14. };

复造代码

拿到及格的路由以后我们就能够把路由放到项目路由表中来了

  先看一下我们的静态路由

1. // 设置项目中出有触及权限的大众路由
2. export const constantRoutes = [
3.   {
4.     path: "/login", // 登岸
5.     component: login,
6.   },
7.   {
8.     path: "/register", // 登岸
9.     component: register,
10.   },
11.   {
12.     path: "/",
13.     name: "layout",
14.     component: layout,
15.     children: [],
16.   },
17.   {
18.     path: "/404",
19.     name: "notFound",
20.     component: notFound,
21.   },
22.   // {
23.   //   path: "*",
24.   //   redirect: "/404",
25.   // },
26. ];

复造代码

  我利用的是vue-router是@3.5.2版本以是增加路由利用的是addRoute办法，低版本的vue-router能够测验考试addRoutes办法。（ps：addRoute办法需求一个工具一个工具增加，因而下边利用了for轮回，addrouters办法能够间接把数组增加到路由表中）

1. for (let key in routerMap) {
2.             router.addRoute("layout", routerMap[key]);
3.     }
4. router.addRoute({
5.             path: "*",
6.             redirect: "/404",
7.             hidden: true,
8.   });  

复造代码

  大要：addRoute能够选则路由插进地位。

1. router.addRoutes(menus.concat([{
2.               path: '*',
3.               redirect: '/404',
4.               hidden: true
5.             }]));

复造代码

  给各人表白一下上边对404的疑问，之以是静态路由表把重定背来失落，是由于利用静态路由是同步减载，假设把重定背放静态路由便会招致404劣先级变得很下。放正在同步路由以后再减载重定背，无疑是最公道且契合项目请求的。

  到那里同步路由便减载终了了，能够一般利用。后边便是对多级菜单的静态衬着了，假设有需供能够参考另外一篇文章
对多级菜单的静态衬着

免责声明：假如进犯了您的权益，请联络站少，我们会实时删除侵权内乱容，感谢协作！