详解解决Vue相同路由参数不同不会刷新的问题


Posted in Javascript onOctober 12, 2018

通常情况下我们喜欢设置keepAlive 包裹 router-view

<div id="app">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
</div>

同时在created 中触发请求,在路由参数不同的情况下并不会执行对应的操作。

解决方法:

1、给 router-view 设置 key 属性为路由的完整路径

<keep-alive>
   <router-view :key="$route.fullPath"></router-view>
</keep-alive>

这种方法我觉得应该是一劳永逸的方法,可能对性能造成一定损耗。不适用于一个tab切换路由并加载列表的组件,会造成页面白屏,dev模式不会自动刷新,是个坑

2、官方给出的方法是通过 watch 监听路由变化,做判断路由路径然后调用响应的方法

watch: {
 '$route' () {
 if (this.$route.path === 'test') {
  this.test();
 }
 }
}
watch: {
 'id': {
 handler: 'test',
 //调用方法
 immediate: true,
 //进入立即执行一次
 }
},

这两种方法推荐第一种,第二种需要先对参数id进行赋值

3、通过组件导航守卫来设置对应的meta 属性

beforeRouteEnter: (to, from, next) = > { // 写在当前组件
 to.meta.keepAlive = false  
 next()
},
 beforeRouteLeave: (to, from, next) = > { //写在前一个组件
 to.meta.keepAlive = false
 next()
},

个人比较喜欢第一种方法

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

Javascript 相关文章推荐
jQuery之ajax删除详解
Feb 27 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 Javascript
详解webpack loader和plugin编写
Oct 12 #Javascript
深入理解Angularjs 脏值检测
Oct 12 #Javascript
vue中render函数的使用详解
Oct 12 #Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 #Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 #Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 #Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 #Javascript
You might like
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
jquery $.ajax入门应用二
2008/11/19 Javascript
Prototype Function对象 学习
2009/07/12 Javascript
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
JavaScript 的继承
2011/10/01 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
python的range和linspace使用详解
2019/11/27 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
小学生秋游活动方案
2014/02/23 职场文书
个人银行贷款担保书
2014/04/01 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2015年企业新年寄语
2014/12/08 职场文书
简历中自我评价范文
2015/03/11 职场文书
五年级作文之成长
2019/09/16 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技
KVM基础命令详解
2022/04/30 Servers
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers