在做后台管理的时候，经常会遇到这种需求，就是路由权限的问题，而在做路由权限的时候，由于不同角色，比如管理员、普通用户等所能看到的页面是不一样的，因此就存在需要动态添加路由的问题。

1、动态添加路由用到的 API：

1、router.addRoute()

该 API 有两种用法

// 添加一条新路由规则。如果该路由规则有 name，并且已经存在一个与之相同的名字，则会覆盖它。
router.addRoute(route: RouteConfig): () => void

// 添加一条新的路由规则记录作为现有路由的子路由。如果该路由规则有 name，并且已经存在一个与之相同的名字，则会覆盖它。
router.addRoute(parentName: string, route: RouteConfig): () => void

2、router.getRoutes()

该 API 表示获取所有活跃的路由记录列表

2、在全局前置守卫中动态添加路由

router.beforeEach((to, from, next) => {
	...
	router.addRoute(routes)   // routers表示需要动态添加的守卫，如果需要添加多个，则需要遍历下，分别执行addRoute方法
	next()
})

这样就完了吗？当然不是，因为这样确实能添加成功，也能访问，但是如果刷新页面的话，会发现白屏，导致这个问题的原因是，刷新时，当前访问的路由还没有存入到路由相信中，也就是 router 中，我们就开始访问它，此时当然是白屏。
解决的办法是等路由加载完毕，再开始跳转

router.beforeEach((to, from, next) => {
	...
	router.addRoute(routes)   // routers表示需要动态添加的守卫，如果需要添加多个，则需要遍历下，分别执行addRoute方法
	next({ ...to })   // 很关键的一步
})

ps：这里有几点需要注意的地方：

1、动态添加路由时使用 addRoute () 方法，如果同时添加多条路由，需要遍历路由，然后分别执行 addRoute () 方法，addRoutes () 方法已废弃。

2、在动态添加路由的时候，需要做好判断，比如初始化一个变量为 false，当变量为 false 时，执行动态添加路由后，然后将该变量改为 true，否则会一直重复添加路由，导致报错。

3、动态添加路由时，需要等路由加载完，然后执行 next () 方法，否则刷新页面会白屏，关键代码 next ({ ...to})