浅谈针对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 相关文章推荐
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 Javascript
JavaScript对IE操作的经典代码(推荐)
Mar 10 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
教你如何在Node.js中使用jQuery
Aug 28 Javascript
ES6新特性一: let和const命令详解
Apr 20 Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
angular6开发steps步骤条组件
Jul 04 Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 Javascript
vue视频播放暂停代码
Nov 08 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
第九节--绑定
2006/11/16 PHP
PHP 处理图片的类实现代码
2009/10/23 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
PHP异常处理Exception类
2015/12/11 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
Python学习入门之区块链详解
2017/07/25 Python
Python 字符串换行的多种方式
2018/09/06 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
Python实现微信机器人的方法
2019/09/06 Python
如何使用python代码操作git代码
2020/02/29 Python
python try...finally...的实现方法
2020/11/25 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
市场营销专业个人自荐信格式
2013/09/21 职场文书
成考报名单位证明范本
2014/01/16 职场文书
应聘面试自我评价
2014/01/24 职场文书
一年级学生评语
2014/04/23 职场文书
2014年政协工作总结
2014/12/09 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python
golang在GRPC中设置client的超时时间
2021/04/27 Golang
python 制作一个gui界面的翻译工具
2021/05/14 Python
写好Python代码的几条重要技巧
2021/05/21 Python