Mosu | Mosuzi的博客
·
记一次动态注册路由导致的路由跳转阻塞问题
💡
原文中文，约2900字，阅读约需7分钟。
📝
内容提要
在项目中，登录后异步加载脚本并注册路由可能导致路由跳转停止。原因是动态注册路由时，Vue Router 的 `addRoute()` 方法触发 `transitionTo()`，使当前路由与目标路由相同，从而阻止跳转。解决方案是调用 `matcher.addRoute()`，避免多余的 `transitionTo()`，并在注册后使用 `router.replace()` 刷新页面，以确保路由正确渲染。
🎯
关键要点
- 在项目中，登录后异步加载脚本并注册路由可能导致路由跳转停止。
- 动态注册路由时，Vue Router 的 addRoute() 方法触发 transitionTo()，使当前路由与目标路由相同，从而阻止跳转。
- 解决方案是调用 matcher.addRoute()，避免多余的 transitionTo()。
- 在注册后使用 router.replace() 刷新页面，以确保路由正确渲染。
- 如果登录后跳转的页面是新注册的路由，可能会导致页面停止渲染，变成空白页面。
❓
延伸问答
动态注册路由时为什么会导致路由跳转停止？
因为 Vue Router 的 addRoute() 方法触发 transitionTo()，使当前路由与目标路由相同，从而阻止跳转。
如何解决动态注册路由导致的路由跳转阻塞问题？
可以调用 matcher.addRoute() 避免多余的 transitionTo()，并在注册后使用 router.replace() 刷新页面。
在什么情况下会出现页面停止渲染的问题？
当登录后跳转的页面是新注册的路由时，可能会导致页面停止渲染，变成空白页面。
为什么使用 addRoute() 会导致路由跳转被打断？
因为 addRoute() 会触发 transitionTo()，如果当前路由与目标路由相同，就会导致跳转停止。
使用 router.matcher.addRoute() 有什么好处？
使用 router.matcher.addRoute() 可以避免触发多余的 transitionTo()，从而减少路由跳转阻塞的风险。
在解决方案中，为什么需要使用 router.replace()？
使用 router.replace() 是为了在注册新路由后刷新页面，确保路由能够正确渲染。
➡️
