详解解决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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
详解JS 比较两个Json对象的值是否相等的实例
Nov 20 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
用vue写一个日历
Nov 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
ftp类(example.php)
2006/10/09 PHP
php学习笔记之 函数声明(二)
2011/06/09 PHP
php微信公众号开发模式详解
2016/11/28 PHP
PHP中list方法用法示例
2016/12/01 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
JavaScript中的substr()方法使用详解
2015/06/06 Javascript
jquery validate demo 基础
2015/10/29 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
详解Python中namedtuple的使用
2020/04/27 Python
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
数组越界问题
2015/10/21 面试题
计算s=f(f(-1.4))的值
2014/05/06 面试题
小学敬老月活动方案
2014/02/11 职场文书
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
法律进企业活动方案
2014/03/04 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript