版本 vue router 3

问题说明

登录成功后，想重定向到/index，执行router.push之后进入beforeEach；
由于第一次访问，判断用户信息为空，需要异步拉取用户的权限等信息，
获得响应后，使用addRoutes批量添加路由信息，然后执行next()放行。

但是，页面没有跳转首页，无任何反应，
控制台打印日志，没有发现问题：

问题分析

首先，/index路由是在本地添加的静态路由，所以总是能匹配到结果，和添加的动态路由没有关系，所以问题不是路由匹配失败导致的（路由匹配不到，应该显示白屏才对）

查看vue router源码，发现除了添加路由，下面还有一个if判断，修改了目标页面。

src/index.js:

addRoutes (routes: Array<RouteConfig>) {
    this.matcher.addRoutes(routes)
    if (this.history.current !== START) {
      this.history.transitionTo(this.history.getCurrentLocation())
    }
  }
}

我们当前处于/login登录页面，无法跳转，所以history.current是/login，START被定义为/。
两者肯定是不相等的，于是会执行transitionTo(this.history.getCurrentLocation())，也就是路由目标被改成了当前页面，那我们就还是处在登录界面，而不是首页

问题解决

addRoutes后，不要使用next()，使用next(to)，即手动的再次跳转到目标页面。
不过要注意，next(to)会再次进入beforeEach路由守卫，我们要设置判断逻辑，如果路由信息已经存在，就不再执行addRoutes，直接next()放行，才能跳转。不然会一直next(to)，循环进入beforEach。

同时，我们不希望之后每次刷新同一个页面，都重复插入相同的路由历史记录，可以加一个选项replace: true，使用替换模式来替换最新一条相同历史记录

if(路由信息已添加){
	// 直接放行
	next()
}
else{
	//添加动态路由信息
	addRoutes(xxx)
	// 手动跳转
	next({ ...to, replace: true })
}

参考资料https://mosuzi.com/docs/tech/vue-router-add-route-blocks-next/index.html