解决vue-router 切换tab标签关闭时缓存问题


Posted in Javascript onJuly 22, 2020

在router入口页面加上 keepAlive: true // 需要被缓存 false则不需要

{
  path: 'fundProListG',
  component: resolve => require(['@/pages/product/fundPros/fundTab/fundTab.vue'], resolve),
  title: '基金首页',
  redirect: 'fundProListG/fundProListG',
  meta: {
  keepAlive: false // 不需要被缓存
  },
  children: [{
  path: 'fundProListG',
  component: resolve => require(['@/pages/product/fundPros/fundProListG.vue'], resolve),
  meta: {
  keepAlive: true // 需要被缓存
  }
  },{
  path: 'fungAdm',
  component: resolve => require(['@/pages/product/fundPros/fungAdm.vue'], resolve),
  meta: {
  keepAlive: true // 需要被缓存
  }
  }]
 },

App.vue (你在哪写的那个<router-view ></router-view>标签就在哪改动)

<keep-alive>
 <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive"></router-view>

当点关闭标签的时候如果不想当前页面缓存 加上

解决vue-router 切换tab标签关闭时缓存问题

接着遇到了第一次缓存第二次改为false后打开不缓存了 在关闭标签页面 加上这个

解决vue-router 切换tab标签关闭时缓存问题

补充知识:解决通过vue-router打开tab页,下次进入还是上次history缓存的界面状态的问题

一、问题描述:

1. 跳转模式:界面A-->界面B(界面A中通过 this.$router.push({name:'组件B名称', params: {参数}}) 通过打开新tab页的方式打开界面B。)

2.关闭界面B,回到界面A

3.再次从A到B时,打开的界面B仍然是上次的状态,哪怕传递的参数不一样。

另:router声明如下

{
 path: 'demo/pageB',
 name: 'pageB',
 component: _import('demo/pageB'),
 meta: {
  requiresAuth: true,
  keepAlive: false, // 不需要被缓存
  title: '界面B'
 }
}

二、原因: 详见vue-router官网

解决vue-router 切换tab标签关闭时缓存问题

三、解决方式:在界面B离开时,销毁组件。代码如下:

// 导航离开该组件的对应路由时调用[可以访问组件实例 `this`]
beforeRouteLeave (to, from, next) {
 // 销毁组件,避免通过vue-router再次进入时,仍是上次的history缓存的状态
 this.$destroy(true)
 next()
}

更多beforeRouteLeave 详见官网

四、其它解决方式(未成功):

vue-router官网提供了 router.replace(location, onComplete?, onAbort?) 的方式,使得不向 history中新增记录,但是我未尝试成功,具体原因暂不知。

官网描述:

解决vue-router 切换tab标签关闭时缓存问题

我的写法:

this.$router.replace({name:'组件B名称', params: {参数}}, () => { this.warning('test!') }, () => { this.warning('test!') })

以上这篇解决vue-router 切换tab标签关闭时缓存问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 Javascript
微信小程序 购物车简单实例
Oct 24 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
js实现下拉菜单效果
Mar 01 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
基于JavaScript获取url参数2种方法
Apr 17 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 22 #Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 #Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 #Javascript
js实现带积分弹球小游戏
Jul 21 #Javascript
在vue中created、mounted等方法使用小结
Jul 21 #Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 #Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 #Javascript
You might like
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
Javascript访问器属性实例分析
2014/12/30 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
解密Python中的描述符(descriptor)
2015/06/03 Python
常见python正则用法的简单实例
2016/06/21 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
Python中单例模式总结
2018/02/20 Python
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
某个公司的Java笔面试题
2016/03/11 面试题
某公司的.net工程师面试题笔试题
2013/11/22 面试题
环境工程大学生自荐信
2013/10/21 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
六五普法规划实施方案
2014/03/21 职场文书
房展策划方案
2014/06/07 职场文书
计划生育诚信协议书
2014/11/02 职场文书
计划生育责任书
2015/05/09 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书