// store/index.js import router from '@/router' import Main from '@/components/main' import { getToken } from '@/lib/util' import { getRoute } from '@/api/app' const loadView = (viewPath) => { // 用字符串模板实现动态 import 从而实现路由懒加载 return () => import(`@/view/${viewPath}`) } const filterAsyncRouter = (routeList) => { return routeList.map((route) => { if (route.component) { if (route.component === 'Main') { // 如果 component = Main 说明是布局组件 // 将真正的布局组件赋值给它 route.component = Main } else { // 如果不是布局组件就只能是页面的引用了 // 利用懒加载函数将实际页面赋值给它 route.component = loadView(route.component) } // 判断是否存在子路由，并递归调用自己 if (route.children && route.children.length) { route.children = filterAsyncRouter(route.children) } } }) } export default { state: { routeList: [], token: getToken(), hasGetRoute: false }, mutations: { setRouteList(state, data) { // 先将 JSON 格式的路由列表解析为 JavaScript List // 再用路由解析函数解析 List 为真正的路由列表 state.routeList = filterAsyncRouter(JSON.parse(data)) // 修改路由获取状态 state.hasGetRoute = true } }, atcions: { getRouteList({ state, commit }) { return new Promise((resolve) => { const token = state.token getRoute({ token }).then((res) => { let data = res.data.data // 注意这里取出的是 JSON 格式的路由列表 commit('setRouteList', data) resolve() }) }) } } }
常见问题
页面卡在登录页面而且不断刷新
这个问题的解决方案在「实现代码」中已经提到了，只需要在判断登录状态的时候注意不要将两种未登录状态混为一谈即可。但这样治标不治本，因为同样的问题可以由不同形式的代码导致，那导致问题的原因是什么那？然我们慢慢分析：
我们先假设不小心把两种未登录的状态混在一起判断：
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 Router 实现动态路由和常见问题及解决方法的文章就介绍到这了,更多相关vue router 动态路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: