解决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 输入框内容格式验证代码
Feb 11 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
jquery 关于event.target使用的几点说明介绍
Apr 26 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
JS库之wow.js使用方法
Sep 14 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
从vue源码看props的用法
Jan 09 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 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.MVC的模板标签系统(四)
2006/09/05 PHP
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
javascript生成大小写字母
2015/07/03 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
简单谈谈JS中的正则表达式
2017/09/11 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
Python实现二叉搜索树
2016/02/03 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
高职助产应届生自荐信
2013/09/24 职场文书
毕业生教师求职信
2013/10/20 职场文书
青年创业培训欢迎词
2014/01/08 职场文书
警校毕业生自我评价
2014/04/06 职场文书
行政专员求职信范文
2014/05/03 职场文书
安全责任书
2015/01/29 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
商务信函英语问候语
2015/11/10 职场文书
Django路由层如何获取正确的url
2021/07/15 Python
MySQL多表查询机制
2022/03/17 MySQL