浅谈针对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获取iframe的document对象的方法
Oct 10 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
jQuery插件之validation插件
Mar 29 jQuery
JavaScript队列函数和异步执行详解
Jun 19 Javascript
总结js函数相关知识点
Feb 27 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 Javascript
正则表达式基础与常用验证表达式
Jun 16 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
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
numpy添加新的维度:newaxis的方法
2018/08/02 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
经济信息管理专业大学生求职信
2013/09/27 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
工作推荐信范文
2014/05/10 职场文书
创先争优个人承诺书
2014/08/30 职场文书
运动会广播稿100字
2014/09/14 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书