博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue-router重定向 不刷新问题
阅读量:4987 次
发布时间:2019-06-12

本文共 1313 字,大约阅读时间需要 4 分钟。

  前阵子太忙了,自己一个人一边开发着新项目,一边维护着旧项目,没时间写博客,终于让我腾出时间了。废话少说,开始正文。

 问题描述:

  之前项目是angular开发的,后来用vue重构后。项目路径和vue路径不一致,但是app端分享出的链接,依旧是旧项目链接

 解决方法:

 

  通过阅读vue-router的官方文档,发现可以解决这个问题。

  如之前文件路径是'/live/detail/id=7234','/skill/microList/',新项目路径是'/s/live/detail?id=7234','/s/live/list'

{path: '/live/list(/)?:foo', redirect: '/s/live/list'},{path: '/s/live/list', meta: {keepAlive:true,title: '课程'}, component: resolve => require(['../pages/s/live/list/Index.vue'], resolve)},{path: '/live/detail(/)?:id', redirect: '/s/live/detail?:id'},{path: '/s/live/detail', meta: {title: '课程详情'}, component: resolve => require(['../pages/s/live/detail/Index.vue'], resolve)},

 新的问题:  

   本来以为重定向就万事大吉了,结果发版后,有用户反馈是空白页面。我仔细看了路径没问题啊,顺直一点点排查,发现重定向成功了,但是页面没刷新

 解决方法:

  通过仔细观察,重定向的过程,发现会先执行旧路由,再进行重定向,那么可以统一配置旧路径,让其刷新。router中

{path: '*',meta:{title: '学部'}, component: resolve => require(['../pages/NotFound/Index.vue'], resolve)},

 

   使用通配符,让之前没有写路径规则的页面,统一跳转到一个新的页面,让再新页面判断是否是重定向过来的。NotFound页面的代码

beforeRouteEnter(to,from,next){      next(vm => {        console.warn(to.redirectedFrom)        if(to.redirectedFrom){//vue-router redirect不会刷新页面,需要判断并刷新          // vm.$router.go(0)//safari浏览器go(0)无效          window.location.reload()        }      })    },

  重定向的页面会有redirectedFrom这个属性,然后让其刷新即可。

 

转载于:https://www.cnblogs.com/cjh1111/p/9187032.html

你可能感兴趣的文章
poj 2992 Divisors
查看>>
code review
查看>>
【摘录】Matrix学习——图像的复合变化
查看>>
RobotFramework自动化测试之脚本编写(一)
查看>>
学号 20175223 《Java程序设计》第10周学习总结
查看>>
解决 安装cocoapods失败,提示 requires Ruby version >=2.2.2
查看>>
四轴飞行器1.7 NRF24L01P无线通讯和改进型环形缓冲
查看>>
Java文件IO操作应该抛弃File拥抱Paths和Files
查看>>
IO多路复用(一)-- Select、Poll、Epoll
查看>>
如何配置Filter过滤器处理JSP中文乱码(转)
查看>>
ASP.NET Core 实战:基于 Jwt Token 的权限控制全揭露
查看>>
将Session放入Redis
查看>>
微信小程序图片使用示例
查看>>
程序员在工作中如何快速成长和学习?
查看>>
YII 1.0 (7) 登录信息调取 session使用
查看>>
原生ajax
查看>>
BZOJ 2038: [2009国家集训队]小Z的袜子(hose)
查看>>
第二语言习得理论介绍
查看>>
Django 高级视图
查看>>
C++中的重载隐藏覆盖&&JAVA中的重载覆盖&&多态
查看>>