动态路由

动态路由就是动态地非配路由权限。根据不同的场景来分配你可以访问哪些路由(页面)，最简单常见的就是角色分配，比如系统有普通用户和管理员两种角色，有些页面只能管理员能访问，普通用户不能。动态路由的职责就是给不同的角色分配他们能访问的路由。

动态路由的实现 实现思路：登陆之后后台返回路由列表，前端把后台传的这些列表填加到路由上

首先一般路由会分为两种：

• 通用路由: 不需要动态判断权限的路由，eg:登陆页，通用页
• 动态路由: 需要动态判断权限并通过 addRoutes 动态添加的页面

首先在 router.js 定义通用路由

定义一个过滤路由的函数，遍历后台传回来的路由字符串，转换为组件对象

//因为后台传过来的component是一个字符串，前端需要处理一下
route.component = () => import(`@/${routeMap[route.name]}`)

创建路由守卫，在路由钩子函数router.beforeEach判断是否可访问指定的页面 首先判断是否登陆，然后判断是否加载了动态路由， 将过滤出来的路由组件通过router.addRouter动态添加路由，并存入VueX的state中

//每次添加前需要重置一下
router.match = createRouter(routes).match//重置路由
router.addRoutes(routes) // 动态添加可访问路由表