详解解决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 相关文章推荐
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
jQuery实现简单下拉导航效果
Sep 07 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
BootStrap中Table分页插件使用详解
Oct 09 Javascript
javascript基础知识讲解
Jan 11 Javascript
vue中路由参数传递可能会遇到的坑
Dec 07 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
JS运动改变单物体透明度的方法分析
Jan 23 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
JavaScript canvas绘制折线图
Feb 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 正则表达式小结
2009/08/31 PHP
joomla内置的表单验证功能使用方法
2010/06/11 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
javascript插入样式实现代码
2012/02/22 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
详解ES6通过WeakMap解决内存泄漏问题
2018/03/09 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
python 错误处理 assert详解
2020/04/20 Python
Django 解决由save方法引发的错误
2020/05/21 Python
java程序员面试交流
2012/11/29 面试题
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
美术教师求职信范文
2015/03/20 职场文书