关于next({ ...to, replace: true })的理解

多人在使用动态添加路由addRoutes()会遇到下面的情况：

• 问题：在addRoutes()之后，第一次访问被添加的路由会白屏。
• 原因：在addRoutes()之后，立刻访问被添加的路由时，addRoutes()没有执行结束，因而找不到刚刚被添加的路由导致白屏。
• 解决方案：需要重新访问一次路由才行。

该如何解决这个问题 ?
此时就要使用next({ ...to, replace: true })来确保addRoutes()时动态添加的路由已经被完全加载上去。

关于next({ …to, replace: true })

1. replace: true只是一个设置信息，告诉VUE本次操作后，不能通过浏览器后退按钮，返回前一个路由。
2. next({ ...to })的执行很简单，它会判断：
   如果参数to不能找到对应的路由的话，就再执行一次路由守卫（beforeEach((to, from, next)）直到其中的next({ ...to})能找到对应的路由为止。

next({ ...to, replace: true })可以保证addRoutes()已经执行完成，路由中已经有我们后来添加进去的用来路由了。
找到对应的路由之后，接下来将前往对应路由，并执行路由守卫（beforeEach((to, from, next)），因此需要用代码来判断是否可以该入改路由（本文的代码根据store中的allowRoutes的长度是否大于零来确定是否进行next()），如果是，就执行next()放行。

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

因此你还需要确保在当addRoutes()已经完成时，所执行到的这一次路由守卫beforeEach((to, from, next)中有一个正确的next()方向出口。

以下就是上述内容的伪代码，敲重点

if (store.state.allowRouters && store.state.allowRouters.length > 0) {
   // 路由的出口 addRoute已经完成 避免路由守卫进入死循环
   next()
} 
else{
	router.addRoute('要添加的路由');
	// 保证addRoute已经完成，并导航到对应的路由
	next({ ...to, replace: true })
}