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 相关文章推荐
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
JQuery中dataGrid设置行的高度示例代码
Jan 03 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
jQuery实现图片轮播效果代码
Sep 27 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 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
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
PHP+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
php编写一个简单的路由类
2011/04/13 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
浅析为什么a="abc" 不等于 a=new String("abc")
2017/10/25 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
使用axios请求接口,几种content-type的区别详解
2019/10/29 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
员工年终考核评语
2014/12/31 职场文书
招标保密承诺书
2015/01/20 职场文书
毕业生对母校寄语
2015/02/26 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android
Appium中scroll和drag_and_drop根据元素位置滑动
2022/02/15 Python