其他router相关内容索引
序号 | 内容 | 连接地址 |
---|---|---|
1 | vue router 整合引入 | https://blog.csdn.net/qq_21271511/article/details/109368459 |
2 | vue router 模块化开发 | https://blog.csdn.net/qq_21271511/article/details/109369247 |
3 | vue router 动态路由及菜单实现之一 | https://blog.csdn.net/qq_21271511/article/details/109496415 |
4 | vue router 动态路由及菜单实现之二 | https://blog.csdn.net/qq_21271511/article/details/109998976 |
5 | vue router 动态路由及菜单实现问题汇总 | https://blog.csdn.net/qq_21271511/article/details/110038256 |
6 | vue el-menu多级菜单递归 | https://blog.csdn.net/qq_21271511/article/details/109889934 |
7 | vue router 懒加载常见写法 | https://blog.csdn.net/qq_21271511/article/details/109776741 |
vue router 动态菜单实现问题
问题一:刷新页面router丢失
动态路由页面刷新时显示undefine,实际是未找到路由
问题分析
刷新页面会导致动态加载的router数据被清理,我们只在登录的时候加载路由是不行的,后续刷新这个路由就没有地方可以重新加载了,所以直接访问就直接undefine了。
问题解决
这个开始我尝试的思路也有几个:
1、刷新问题,会将store中的数据刷新掉,但localstorage和sessionStorage中的数据不会刷新掉,可以将菜单放到这两个里面。这个方案也是可行的,刷新router还在,就是router和菜单都从storage中取值。但这两个东西的空间都不大,也还要放其他的内容。
2、在每个页面挂载的时候加载的时候调用菜单和router的初始化方法。这样写也行,就是将login的create方法里调用的store方法封装到Header组件里面,然后每个页面都有这个,就都会加载一波。刷新也没有问题
3、最后就是在router跳转的时候的,把刷新的情况区分出来,这样就在页面跳转和刷新的两种情况处理一下,该加载的时候重新加载就可以了
最后采用的还是在路由导航守卫中添加,每次跳转时判断菜单是否存在,不存在则重新加载。
//判断store中是否含有routers,含有则是正常跳转
if (router.app.$options.store.state.asyncRoutes.addRoutes.length > 0) {
next();
}
//不含有则是用户F5刷新
else {
console.log("to:" + to);
console.log("from:" + from);
//生成菜单,路由变化时生成菜单。
/*
* config中 publicPath设置为"/" ,每次刷新页面时,
* 会先从publicPath跳转到 to.path,再从to.path 跳转到 to.path。
* 执行两次beforeEach中的内容
*/
if (from.path != to.path) {
router.app.$options.store.dispatch("GenerateRoutes")
.then(res => {
console.log(res);
})
}
next();
}
这里最重要的是如何判断用户是正常跳转,还是点击刷新。这点因为刷新的话store中的数据会清空,所以根据这个来判断就可以了。
问题二:beforeEach加载两次
beforeEach加载两次问题。接上个问题一,这样调用的时候会加载两次beforeEach,找了半天的原因,终于给发现了。在网上也看了一些博客和帖子,还有issue,但原因都模糊不清。
问题分析
router.beforeEach在路由变化时会发生调用,但是刷新为啥会有两次路由变化。通过记录from和to的path,可以查看到路由跳转的变化。
第一次:from “/” to 刷新的路由
第二次:from 刷新的路由 to 刷新的路由
可以看到刷新路由,都是从path “/” 开始的,但我们访问的时候是只要"/system/home" 这个指定路由的。
怀疑是vue.config.js中的publicPath影响了,配置为"/"。是不是配置为"/"的都会从/ 开始跳转
问题解决
判断路由变化的时候再做相关操作。这里就直接判断from的path和to的path是否有变化,没有变化的就不管了
if (from.path != to.path)
publicPath的目前还没搞清楚是怎么影响的,不过这个不影响解决问题,嘿嘿