浅谈针对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 相关文章推荐
可输入的下拉框
Jun 19 Javascript
JavaScript的目的分析
Jan 05 Javascript
prototype Element学习笔记(篇一)
Oct 26 Javascript
js 操作符实例代码
Oct 24 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
JS控制一个DIV层在指定时间内消失的方法
Feb 17 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
如何更好的编写js async函数
May 13 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
react实现同页面三级跳转路由布局
Sep 26 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之Smarty入门
2007/01/04 PHP
php简单静态页生成过程
2008/03/27 PHP
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
Python高效编程技巧
2013/01/07 Python
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
Python函数式编程
2017/07/20 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
Python3的socket使用方法详解
2020/02/18 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
婚假请假条怎么写
2014/04/10 职场文书
法学专业求职信
2014/07/15 职场文书
暑假学习心得体会
2014/09/02 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
煤矿安全保证书
2015/02/27 职场文书
2015大学生求职信范文
2015/03/20 职场文书
通知范文怎么写
2015/04/16 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
借条格式范本
2015/05/25 职场文书
法院执行局工作总结
2015/08/11 职场文书
护士旷工检讨书
2015/08/15 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript