详解解决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实现excel导出的方法
Apr 04 Javascript
js data日期初始化的5种方法
Dec 29 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
jquery动态切换背景图片的简单实现方法
May 14 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
javascript实现评分功能
Jun 24 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 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中的一个中文字符串截取函数
2007/02/14 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
JQquery的一些使用心得分享
2012/08/01 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
js 通用订单代码
2013/12/23 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
详解python之简单主机批量管理工具
2017/01/27 Python
python实现linux下抓包并存库功能
2018/07/18 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
python opencv摄像头的简单应用
2019/06/06 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
抗震救灾标语
2014/06/26 职场文书
作风年建设汇报材料
2014/08/14 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
质检员岗位职责范本
2015/04/07 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
创业计划书之花店
2019/09/20 职场文书
Python包argparse模块常用方法
2021/06/04 Python
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript