解决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 相关文章推荐
两个select之间option的互相添加操作(jquery实现)
Nov 12 Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
Document.location.href和.replace的区别示例介绍
Mar 04 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
JS二级菜单不同实现方法分析【4种方法】
Dec 21 Javascript
让你30分钟快速掌握vue3教程
Oct 26 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
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
Python中join和split用法实例
2015/04/14 Python
连接Python程序与MySQL的教程
2015/04/29 Python
一个基于flask的web应用诞生 bootstrap框架美化(3)
2017/04/11 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
python re模块的高级用法详解
2018/06/06 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
python之信息加密题目详解
2019/06/26 Python
html5定位并在百度地图上显示的示例
2014/04/27 HTML / CSS
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
PyQt QMainWindow的使用示例
2021/03/24 Python
公司庆典邀请函范文
2014/01/13 职场文书
入党积极分子群众意见
2015/06/01 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis
Django使用redis配置缓存的方法
2021/06/01 Redis
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python
Java中使用Filter过滤器的方法
2021/06/28 Java/Android
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL