详解解决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对象和属性的创建方法
Jan 15 Javascript
javascript 学习之旅 (3)
Feb 05 Javascript
JavaScript设置FieldSet展开与收缩
May 15 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
详解支持Angular 2的表格控件
Jan 19 Javascript
js时间查询插件使用详解
Apr 07 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 Javascript
微信小程序实现自定义底部导航
Nov 18 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程序
2006/10/09 PHP
PHP中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
Python 多线程Threading初学教程
2017/08/22 Python
Python探索之SocketServer详解
2017/10/28 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
如何获取Python简单for循环索引
2019/11/21 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
土木工程毕业生自荐信
2013/11/12 职场文书
法律专业应届生自荐信范文
2014/01/06 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
市场总经理岗位职责
2014/04/11 职场文书
个人批评与自我批评
2014/10/15 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
安全生产感想
2015/08/07 职场文书
生日寿星公答谢词
2015/09/29 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书