解决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 学习初步 入门教程
Mar 25 Javascript
xheditor与validate插件冲突的解决方案
Apr 15 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
JS查找数组中重复元素的方法详解
Jun 14 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
基于 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原理之执行周期分析
2016/06/01 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
javascript 对象比较实现代码
2009/04/27 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
详解Python命令行解析工具Argparse
2016/04/20 Python
利用Python爬取可用的代理IP
2016/08/18 Python
用Python将IP地址在整型和字符串之间轻松转换
2017/03/22 Python
关于Keras Dense层整理
2020/05/21 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
python读取xml文件方法解析
2020/08/04 Python
python 星号(*)的多种用途
2020/09/21 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
Django如何重置migration的几种情景
2021/02/24 Python
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
办公室主任先进事迹
2014/01/18 职场文书
学生会竞聘书范文
2014/03/31 职场文书
市场营销工作计划书
2014/05/06 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
旷课检讨书
2015/01/26 职场文书
婚育证明样本
2015/06/16 职场文书
2016年党建工作简报
2015/11/26 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang