详解解决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 相关文章推荐
javascript支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
jQuery的强大选择器小结
Dec 27 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
javascript学习之json入门
Dec 22 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 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验证信用卡卡号是否正确函数
2015/05/27 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
在layui中select更改后生效的方法
2019/09/05 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
python使用Image处理图片常用技巧分析
2015/06/01 Python
如何用python整理附件
2018/05/13 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
检查接待方案
2014/02/27 职场文书
大学班级学风建设方案
2014/05/01 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
如何用python绘制雷达图
2021/04/24 Python
Python标准库pathlib操作目录和文件
2021/11/20 Python