我们先假设不小心把两种未登录的状态混在一起判断：
if (!token) {
next({ name: LOGIN_PAGE_NAME })
}这里的
next({ name: LOGIN_PAGE_NAME })方法会再一次激活全局前置守卫，从而导致再一次进入判断并触发
next({ name: LOGIN_PAGE_NAME })，如此递归调用下去，页面就会卡主并且不断刷新。动态路由配合路由懒加载
实现这一目的的方案也在代码示例中展示了：
const loadView = (viewPath) => {
return () => import(`@/view/${viewPath}`)
}这里是运用了一个 JavaScript 不太常用的特性：字符串模板，使用此特性让不支持字符串拼接的
import操作能够实现动态
import不同的模块。动态路由刷新后 404
这应该是本方案中最常见的一个错误之一，其原意是很多人在创建「基本静态路由」的时候回把 404 页面的路由也加入在里面，从而导致页面加载初期动态路由还没有加入到路由实例中，匹配范围最广的 404 页面就会跳出来。解决方法就是将 404 页面的路由也加入到动态路由中。
动态路由刷新后变空白页
造成这一问题的原因有很多，我这里遇到的问题是使用参考文章3解决的，但具体原理我还没弄清楚，等我做一下研究再来更新。
动态路由页面刷新时 Title 不稳定
造成这一问题的原因很简单：因为页面刷新的时候路由信息还没加载进来，所以根本没有标题信息可供加载。但是我还没找到比较好的解决方案，同样等我研究一下再更新。
参考大师兄：
Vue 动态路由的实现……
Vue Router 文档页面
rambo：vue router 动态路由 刷新后变空白页
总结
到此这篇关于Vue Router 实现动态路由和常见问题及解决方法的文章就介绍到这了,更多相关vue router 动态路由内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
