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 相关文章推荐
由document.body和document.documentElement想到的
Apr 13 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
jQuery对val和atrr("value")赋值的区别介绍
Sep 26 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
js select实现省市区联动选择
Apr 17 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 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/08/18 国漫
PHP 选项及相关信息函数库
2006/12/04 PHP
PHP的5个安全措施小结
2012/07/17 PHP
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
python实现猜单词小游戏
2020/05/22 Python
利用python循环创建多个文件的方法
2018/10/25 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
2014中学教师节广播稿
2014/09/10 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
考试作弊检讨书
2015/01/27 职场文书
2015年教师节活动总结
2015/03/20 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
公司财务部岗位职责
2015/04/14 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
Python基础知识之变量的详解
2021/04/14 Python
SpringBoot快速入门详解
2021/07/21 Java/Android