详解解决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 setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
Jun 11 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
JS使用H5实现图片预览功能
Sep 30 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 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 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
php 的反射详解及示例代码
2016/08/25 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python微信公众号开发简单流程
2018/03/23 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
西安众合通用.net笔试题
2013/03/18 面试题
任长霞观后感
2015/06/16 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android