详解解决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优先加载笔记代码
Sep 30 Javascript
Seajs的学习笔记
Mar 04 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
微信小程序动态添加和删除组件的现实
Feb 28 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 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
世界第一个无线广播电台 KDKA
2021/03/01 无线电
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
Extjs中常用表单介绍与应用
2010/06/07 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
[02:07]DOTA2超级联赛专访BBC:难忘网吧超神经历
2013/06/09 DOTA
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
Python科学画图代码分享
2017/11/29 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
Pytorch之contiguous的用法
2019/12/31 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
大学军训感言400字
2014/03/11 职场文书
团队口号大全
2014/06/06 职场文书
安全目标管理责任书
2014/07/25 职场文书
Python matplotlib多个子图绘制整合
2022/04/13 Python