解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况


Posted in Javascript onOctober 30, 2020

需求:

项目中需要开发一个导航栏,类似浏览器的导航,没有关闭的时候页面缓存,关掉之后,页面随之销毁。(如图)

解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况

项目是使用Vue + Vue-Router + Vuex

刚开始使用的方法是:关闭导航标签,直接调用对应的页面的$destory()方法,OK,可以实现关闭页面(下次再打开该页面,将初始化)的功能,但是遇到个问题:

该页面将不再被缓存,也就是说切换导航tab时,页面将不断的被初始化!!!

查了一下文档,找了度娘,没发现解决方法,又去请教G哥,这才发现原来Vue keep-alive真的有这个问题哎,这个是(链接),要么你自己去看,要么看我的解决方法,嘿嘿嘿,不瞎扯啦,上方法,其实Vue的文档里面也写了的这里:

keep-alive 可以传入两种参数,贴一下官方说明:

include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示:

< keep-alive include=”a,b”>
< component :is=”view”>
< /keep-alive>
< !? 正则表达式 (使用 v-bind) ?>
< keep-alive :include=”/a|b/”>
< component :is=”view”>
< / keep-alive>
< !? 数组 (使用 v-bind) ?>
< keep-alive :include=”[‘a', ‘b']”>
< component :is=”view”>
< /keep-alive>`

匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的>>键值)。匿名组件不能被匹配。

keep-alive 不会在函数式组件中正常工作,因为它们没有缓存实例。

差不多看明白了吧,页面的销毁不一定非得调用$destory() 去做,我理一下思路(include):

首先在vuex里面定义一个数组 includePageNames,这个数组存放的是当前导航栏上显示的页面的名字name(在每个页面的Vue文件中,定义name的值)

当页面打开的时候,将该页面的name加($commit)到includePageNames中

当页面关闭的时候,将includePageNames中该页面对应的name移除掉,这时候该页面液将从缓存中被移除,这不就达到我们想要的结果了吗

具体代码我就不上了,就提一下我遇到的问题:keep-alive 给它传入includePageNames(数组),居然报错,原因是它实际上需要一个正则表达式、或者一个逗号分隔的String,没办法啦,直接将includePageNames.toString()传过去就OK啦

补充知识:vue 页面保留缓存和清除缓存

路由:

routes: [{
    path: '/page1',
    name: page1',
    component: page1',
    meta:{
          keepAlive:true //true是保存缓存,false是不保存
         } 
},{
path: '/page2',
    name: page2',
    component: page2',
     meta:{
          keepAlive:true
         }
 
}]

页面js:

/**
  * 判断是否要清除缓存,beforeRouteLeave与methods等平级
  */
  beforeRouteLeave(to, from, next) {  //参数(马上去的页面,现在的页面,跳转)
  if(判断条件){
     to.meta.keepAlive = false //将要去的那个页面的缓存清空
  }else{
    to.meta.keepAlive = true  //将要去的那个页面的缓存保留
  }
  next();
 },

以上这篇解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
JS实现可调整倒计时间代码分享
Aug 18 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
JS中改变this指向的方法(call和apply、bind)
Mar 26 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
纯JS实现表单验证实例
Dec 24 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
详解easyui 切换主题皮肤
Apr 04 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 #Javascript
微信小程序:报错(in promise) MiniProgramError
Oct 30 #Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 #Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 #Javascript
Javascript文本框脚本实现方法解析
Oct 30 #Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 #Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 #Javascript
You might like
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
TMDPHP 模板引擎使用教程
2012/03/13 PHP
利用php获取服务器时间的实现代码
2013/06/07 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
使用django自带的user做外键的方法
2020/11/30 Python
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
大学生实习自我鉴定
2013/12/11 职场文书
个人自我评价分享
2013/12/20 职场文书
超市端午节活动方案
2014/01/23 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技