详解解决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居然支持中文(unicode)编程!
Apr 12 Javascript
让IE8支持DOM 2(不用框架!)
Dec 31 Javascript
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
详解AngularJs ui-router 路由的简单介绍
Apr 26 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 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 输出缓存详解
2009/06/20 PHP
php简单的会话类代码
2011/08/08 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
JS模板实现方法
2013/04/03 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
js中function()使用方法
2013/12/24 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
Python验证码截取识别代码实例
2020/05/16 Python
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
PHP面试题集
2016/12/18 面试题
网络事业创业计划书范文
2014/01/09 职场文书
2014村务公开实施方案
2014/02/25 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
2014年党支部工作总结
2014/11/13 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
《夹竹桃》教学反思
2016/02/23 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
MySQL 数据 data 基本操作
2022/05/04 MySQL
Python中tqdm的使用和例子
2022/09/23 Python