vue-router重定向不刷新问题的解决


Posted in Javascript onJune 25, 2018

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

问题描述:

之前项目是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这个属性,然后让其刷新即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS阻止用户多次提交示例代码
Mar 26 Javascript
初识SmartJS - AOP三剑客
Jun 08 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
js实现轮播图特效
May 28 Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 #Javascript
详解React之父子组件传递和其它一些要点
Jun 25 #Javascript
Vue EventBus自定义组件事件传递
Jun 25 #Javascript
一个Vue页面的内存泄露分析详解
Jun 25 #Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 #Javascript
angularjs结合html5实现拖拽功能
Jun 25 #Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 #Javascript
You might like
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
简单的js分页脚本
2009/05/21 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
IE无法设置短域名下Cookie
2010/09/23 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
python web框架学习笔记
2016/05/03 Python
django formset实现数据表的批量操作的示例代码
2019/12/06 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
2014年手术室工作总结
2014/11/26 职场文书
2014年电教工作总结
2014/12/19 职场文书
新郎新娘答谢词
2015/01/04 职场文书
英文升职感谢信
2015/01/23 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
小平您好观后感
2015/06/09 职场文书
诚实守信主题班会
2015/08/13 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL