vue-route基于动态加载路由配置的权限管理

在路由权限管理的开发过程中，基于不将用户的配置信息保留在前端的考虑，我着重研究了关于路由配置的动态加载方法。记录如下：

这里我从后端获取的路由配置如下：

routes:[
	{
   
		path: "/home",
		name: "home",
		componentPath: "views/Home",
		children: [
			{
   
				path: "/homeChild",
				name: "homeChild",
				componentPath: "views/Home/HomeChild"
			}
		]
	}
]

得到这个路由配置之后我需要做如下工作：

1. 清空原路由配置（如果有多个内置系统，涉及多菜单切换的时候）；
2. 格式化后台路由配置，让配置格式符合 vue-router 的要求；
3. 添加路由配置；
4. 刷新处理。

下面我们一个一个来说。

清空原路由配置

我在一次项目需求中碰到过这样的情况。一个系统中有两个子系统，这两个子系统的菜单都是根据他们的路由配置动态生成的。路由配置变化，菜单就会响应变化。但是多个系统之间出现路由重名的可能性就大大增加了，毕竟还是要保证路由配置的可读性，名字也不能乱起。所以每次切换系统的时候就需要清空原路由配置。

在这里我给 vue-router 的实例增加了一个新的方法，$addRoutes这个方法既完成了原路由的清空工作，也完成了新增路由的工作。这里我们只看清空原路由配置的相关代码。

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const baseRoutes = [
  {
   
    path: "/",
    name: "Login",
    component: () =