详解解决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之一
Apr 27 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
JavaScript中exec函数用法实例分析
Jun 08 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
JS打印组合功能
Aug 04 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
mpvue 单文件页面配置详解
Dec 02 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语法(4)
2006/10/09 PHP
PHP中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
php 常用的系统函数
2017/02/07 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
django中related_name的用法说明
2020/05/20 Python
如何判断计算机可能已经中马
2013/03/22 面试题
JVM是一个编译程序还是解释程序
2012/09/11 面试题
什么样的创业计划书可行性高?
2014/02/01 职场文书
节约用水标语
2014/06/11 职场文书
暑期实践个人总结
2015/03/06 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
python中if和elif的区别介绍
2021/11/07 Python