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打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
读jQuery之三(构建选择器)
Jun 11 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
JavaScript知识点总结之如何提高性能
Jan 15 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
微信小程序实现多选删除列表数据功能示例
Jan 15 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 Javascript
es6函数之箭头函数用法实例详解
Apr 25 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
Sony CFR 320 修复改造
2020/03/14 无线电
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
javascript验证身份证号
2015/03/03 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
从Python程序中访问Java类的简单示例
2015/04/20 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
Python常用断言函数实例汇总
2020/11/30 Python
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
电气工程师岗位职责
2014/01/01 职场文书
活动志愿者自荐信
2014/01/27 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
创业计划书之旅游网站
2019/09/06 职场文书