头图

在 Vue 3 中使用 router.addRoute(route) 动态添加路由后,路由的匹配信息(即 matched 数组)可能会显示为空。这是因为路由的匹配信息是惰性更新的,只有在路由跳转时才会重新计算。

分两种场合:
1、先跳转,再加路由,加完直接next()放行
2、先跳转,再加路由,next(to.path)重跳后next()放行

场合一:跳转404
如果你先跳转了,再添加路由信息,然后直接next()放行,此时是不会匹配添加的路由信息的,因为是先跳后加的。

场合二:跳转成功
如果你跳转的过程中添加路由信息,之后next(to.path)定向了一次,到守卫里所有条件匹配完成后next(),此时是会命中添加的路由信息的,因为是先加后跳的,在next(to.path)之前加了一次,再次跳转next()会匹配新的路由信息。

next(to.path)相当于重新跳转一次

这也就说明了路由匹配信息是惰性的这个问题,在要对新增的路由信息生效,必须在它新增之前添加。

所以在项目构建的时候,登录成功后 -> 加载路由信息 -> 再跳转 是符合逻辑也符合直觉的。
否则先跳转再加载路由信息会导致你在加载过程中无法读到新添加的路由。


兔子先森
389 声望17 粉丝

致力于新技术的推广与优秀技术的普及。