详解解决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 相关文章推荐
js实现在页面上弹出蒙板技巧简单实用
Apr 16 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 Javascript
js实现商城星星评分的效果
Dec 29 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
详解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
附件名前加网站名
2008/03/23 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
九种原生js动画效果
2015/11/11 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
Python标准库与第三方库详解
2014/07/22 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
介绍下WebSphere的安全性
2013/01/31 面试题
一份报关员的职业规划范文
2014/01/08 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
行政文员岗位职责
2015/02/04 职场文书
早会开场白台词大全
2015/06/01 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
MYSQL如何查看操作日志详解
2022/05/30 MySQL