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 相关文章推荐
JSON+JavaScript处理JSON的简单例子
Mar 20 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
瀑布流布局代码一例
Apr 11 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
老生常谈ES6中的类
Jul 31 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
Node.js API详解之 util模块用法实例分析
May 09 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
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
js操作二级联动实现代码
2010/07/27 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
js实现3D旋转相册
2020/08/02 Javascript
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
Python中条件判断语句的简单使用方法
2015/08/21 Python
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
Python OpenCV获取视频的方法
2018/02/28 Python
python版本的仿windows计划任务工具
2018/04/30 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
广州迈达威.net面试题目
2012/03/10 面试题
Ajax和javascript的区别
2013/07/20 面试题
优秀的个人求职信范文
2014/05/09 职场文书
房地产广告策划方案
2014/05/15 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
商业用房租赁协议书
2014/10/13 职场文书
居住证明范文
2015/06/17 职场文书
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python