解决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 陷阱 window全局对象
Nov 26 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
javascript常见用法总结
May 22 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
javascript之IE版本检测超简单方法
Aug 20 Javascript
js实现网页定位导航功能
Mar 07 Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
iview中Select 选择器多选校验方法
Mar 15 Javascript
Node 升级到最新稳定版的方法分享
May 17 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
vue实现轮播图帧率播放
Jan 26 Vue.js
基于 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
一个简单且很好用的php分页类
2013/10/26 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
vue实现按钮切换图片
2021/01/20 Vue.js
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python实现汉诺塔递归算法经典案例
2021/03/01 Python
python队列queue模块详解
2018/04/27 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
python3下pygame如何实现显示中文
2020/01/11 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
amazeui页面分析之登录页面的示例代码
2020/08/25 HTML / CSS
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
一些PHP的面试题
2015/05/06 面试题
运动会标语
2014/06/21 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python