600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 基于vue框架项目开发过程中遇到的问题总结(三)

基于vue框架项目开发过程中遇到的问题总结(三)

时间:2022-04-09 22:10:38

相关推荐

基于vue框架项目开发过程中遇到的问题总结(三)

这次遇到的一个问题困扰了我很久很久,大致就是vue路由的addRoutes方法的使用,每次在调用了这个之后router对象中并没有将路由添加进去,接下来,我一步一步的分析原因及解决方法(个人见解,仅供参考)

(1)先看看我的失败的代码

store.getters.addRouters我存在vuex中,但是实际是存于session中的,所以刷新后是不会丢失数据的

在app.vue的mounted输出this.$router对象,发现options.routes数组并没有将动态路由添加成功,这个问题困扰了很久,最后找到原因是执行了window.location.reload();使得页面重新加载了,解决办法是:在beforeEach里判断当前路由是否已经有动态路由了,如果没有则添加,并且拉取用户信息的处理不放在登录成功之后,这样就不会受reload的影响

(2)第二版代码

这样改了之后,理论上应该可以了,输出this.$router对象,发现options.routes数组还是没有将动态路由添加成功,

在网上找了解决方案,手动将需要添加的路由添加到options.routes数组(由于路由的所有信息我是在vuex存了的,所以直接全部赋值给了options.routes)

做到这一步,已经完成大部分了,options.routes数组有数据了,动态添加的路由可以正常跳转,页面也有内容,但是很快我又发现一个问题,动态添加的路由页面一刷新就凉凉了(空白),在地址栏输入其他动态添加的路由又是可以正常跳转的,这就很尴尬了。参考了/PanJiaChen/vue-element-admin/blob/master/src/permission.js,找到了解决方法

将next()换成next({ ...to, replace: true }),// hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record

进行到这一步,基本上就已经可以了,这个问题网上有很多类似,但是他们登录跟我不一样,也没有window.location.reload();这一步,所以解决起来还是有不一样的地方

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。