vue-router重定向不刷新问题的解决
2018-06-25 10:48
1371 查看
前阵子太忙了,自己一个人一边开发着新项目,一边维护着旧项目,没时间写博客,终于让我腾出时间了。废话少说,开始正文。
问题描述:
之前项目是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这个属性,然后让其刷新即可。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- vue-router路由参数刷新消失的问题解决方法
- vue-router重定向 不刷新问题
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
- 解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题
- 通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
- vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
- 解决vue页面刷新或者后退参数丢失的问题
- 关于vue-router的beforeEach无限循环的问题解决
- vue-router使用 history 模式刷新后404问题
- 在使用vue-router遇到的问题以及解决办法
- 解决vue-router在同一个路由下切换,取不到变化的路由参数问题
- vue-router组件状态刷新消失的问题
- 浏览器点击百度搜索结果之后,原搜索页面出现重定向乱码不断刷新问题的分析和解决
- 解决vue打包项目后刷新404的问题
- 学习vue框架,遇见router-view标签无法显示的问题解决
- 基于vue-router 多级路由redirect 重定向的问题
- react-router与react-reduct配合使用时页面不刷新问题解决方法
- 解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
- vue-router3.0版本中 router.push 不能刷新页面的问题
- react-router browserHistory刷新页面404问题解决方法