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计算页面刷新的次数
Jul 20 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
JavaScript Array对象使用方法解析
Sep 24 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 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
PHPMyAdmin 快速配置方法
2009/05/11 PHP
php number_format() 函数通过千位分组来格式化数字的实现代码
2013/08/06 PHP
解析php开发中的中文编码问题
2013/08/08 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
python制作一个桌面便签软件
2015/08/09 Python
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
python生成二维码的实例详解
2017/10/29 Python
python logging日志模块的详解
2017/10/29 Python
python框架中flask知识点总结
2018/08/17 Python
微信小程序python用户认证的实现
2019/07/29 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
《燕子》教学反思
2014/02/18 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
房产公证书
2015/01/23 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
PyTorch中permute的使用方法
2022/04/26 Python