vue项目中，addRoutes在router.beforeEach的next()之前使用无效白屏问题

beforeEach

全局前置路由守卫，基础用法如下：

next方法解析

在路由守卫中，只有next()是放行，其他的诸如：next('/logon') 、 next(to) 或者 next({ ...to, replace: true })都不是放行，而是：中断当前导航，执行新的导航

vue-router 动态加载路由

在addRoutes()之后第一次访问被添加的路由会白屏，这是因为刚刚addRoutes()就立刻访问被添加的路由，然而此时addRoutes()没有执行结束，因而找不到刚刚被添加的路由导致白屏。因此需要从新访问一次路由才行。

此时就要使用next({ ...to, replace: true })来确保addRoutes()时动态添加的路由已经被完全加载上去。

replace: true只是一个设置信息，告诉VUE本次 *** 作后，不能通过浏览器后退按钮，返回前一个路由。确保用户在addRoutes()还没有完成的时候，不可以点击浏览器回退按钮。

如果守卫中没有正确的放行出口的话，会一直next({ ...to})进入死循环 。

addRoutes有效果，直接在浏览器访问可以路由成功，但是this.$router.options.routes数组里原来初始化的路由规则不会改变需要自己手动添加，另外即使手动向this.$router.options.routes数组添加了规则，刷新页面改数组里的规则又会恢复成初始化的样子。

本来发现能用了后还是很振奋的，可是后来发现我在创建Vue实例的生命周期钩子函数中，addRoutes可以达到效果，一旦我在组件的生命周期钩子函数中调用addRoutes就没有效果。

addRoutes的使用场景：

一般多用于后台管理页面动态路由跟静态路由，静态路由默认展示的都能看到的页面，动态路由一般需要一些访问权限。当管理员给员工分配角色（这里使用RBAC）角色对应的权限，路由name跟服务器权限名称一致，通addRoutes添加到路由后面。 员工显示的页面就是管理员分配的权限

这里的404路由必须加到最后 否则刷新时 会直接跳到404页面

---