浅谈针对Vue相同路由不同参数的刷新问题


Posted in Javascript onSeptember 29, 2018

在使用vue和vue-router开发spa应用时,我们会遇到这样一种问题。

当页面跳转时,组件本身并没有发生改变:

// 路由映射关系'/form/:type'
// 当前页面路由/form/shop1
this.$router.push({ name: 'form', params: { type: 'shop2' })

这时我们进行路由跳转后会发现组件并没有刷新,在前一个路由组件的数据都保留了下来,这并不是我们想要的效果。

对于简单的数据更新,我们可以直接监听路由参数并重新获取路由的初始化数据即可,
但是对于有很多子组件需要初始化或者reset的情况,我们还是有必要重新执行组件的生命周期。

针对这种情况可以使用三种方式解决:

1.为相同路由页面的跳转进行中间路由替换,在router上注册beforeEach全局守卫进行拦截,跳转到一个中间路由(例如empty),再从中间过渡路由跳转至要去的路由。

// 全局导航守卫
router.beforeEach((to, from, next) => {
 if (to.name === from.name && to.params.type !== from.params.type) {
  next({ name: 'empty', query: { toPath: to.fullPath } })
 } else {
  next()
 }
})

// 中间过渡路由
let toPath = this.$route.query.toPath
if (this.toPath) {
 this.$router.push({ path: this.toPath })
}

2.使用v-if重新渲染当前页面组件

// html部分
<div>
 <router-view v-if="showRouterView"/>
</div>

// script部分
export default {
 data () {
  return {
   isRouterAlive: true
  }
 },
 methods: {
  reload () {
   this.showRouterView = false
   this.$nextTick(() => (this.showRouterView = true))
  } 
 }
}

这样把方法注册到跟组件上,对于想刷新的组件直接调用reload方法即可。

3.使用vue文档组件绑定的key值来进行强制刷新

vue文档说明了当你需要

  • 完整地触发组件的生命周期钩子
  • 触发过渡

的时候可以利用更新组件绑定的key值来完成更详细的说明

这样直接为组件绑定与路由参数关联的值即可

<MyComponent :key="routeParams" />

综合来看,第三种方式最简单,推荐使用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery插件制作 手风琴Panel效果实现
Aug 17 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
微信小程序之GET请求的实例详解
Sep 29 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
vue路由传参三种基本方式详解
Dec 09 Javascript
vue学习之Vue-Router用法实例分析
Jan 06 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 Javascript
Openlayers实现点闪烁扩散效果
Sep 24 Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 #Javascript
详解React之key的使用和实践
Sep 29 #Javascript
vue给组件传递不同的值方法
Sep 29 #Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 #Javascript
浅谈vue项目打包优化策略
Sep 29 #Javascript
vue里input根据value改变背景色的实例
Sep 29 #Javascript
4个顶级开源JavaScript图表库
Sep 29 #Javascript
You might like
PHP开发文件系统实例讲解
2006/10/09 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
javascript,jquery闭包概念分析
2010/06/19 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
Python的randrange()方法使用教程
2015/05/15 Python
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
Python模拟百度登录实例详解
2016/01/20 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
python实现kMeans算法
2017/12/21 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
苹果中国官方网站:Apple中国
2016/07/22 全球购物
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
作风建设整改方案
2014/10/27 职场文书
大学军训决心书
2015/02/05 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python