详解解决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 白痴级入门教程
Nov 11 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
JS中Iframe之间传值的方法
Mar 11 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 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
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
PHP实现MySQL更新记录的代码
2008/06/07 PHP
php中用foreach来操作数组的代码
2011/07/17 PHP
php生成静态文件的多种方法分享
2012/07/17 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
深入理解Python 代码优化详解
2014/10/27 Python
Python异常处理操作实例详解
2018/05/10 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
程序员机试试题汇总
2012/03/07 面试题
物业保安员岗位职责制度
2014/01/30 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL