Vue router4 addRoute动态添加路由，子路由；路由添加后刷新白屏

Posted 2023-04-06

参考技术A 在此之前添加路由只需要把后端返回的结构树放到 addRouters中就可以 router4更新后 废除了addRouters 新增addRoute 下面介绍一下addRoute的用法

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

参考技术A 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)进入死循环 。