vue移动端项目缓存问题实践
最近在做一个vue移动端项目,被缓存问题搞得头都大了,积累了一些经验,特此记录总结下,权当是最近项目问题的一个回顾吧!
先描述下问题场景:A页面->B页面->C页面。假设A页面是列表页面,B页面是列表详情页面,C页面是操作改变B页面的一些东西,进行提交类似的操作。A页面进入B页面,应该根据不同的列表item显示不一样的详情,从B进入C,也应该根据item的标识比如ID展示不一样的内容,在C页面操作后,返回B页面,B页面数据发生变化。这个时候会有两种情况:
- C页面操作数据后返回B页面,B页面对应数据应该发生变化。
- C页面直接点击左上角箭头返回,B页面对应数据不应该发生变化。继续返回A列表页面,换一条数据,继续进入B页面,B页面展示不同内容,进入C页面,C页面刷新展示不同内容
另一种情况发生在写邮件的页面中,添加收件人,选人之后,继续添加,之前添加的联系人应该存在。但是从写邮件页面返回邮件列表再次进入写邮件页面,之前添加过的联系人数据就不应该存在了,这里就涉及到如何处理缓存,何时使用缓存,何时清除缓存的问题了。
目前项目整体结构如下:
<template><div id="app"><keep-alive><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive"></router-view></div>
</template>
虽然官方提供了include,exclude,可以让我们决定哪些组件使用缓存,哪些不使用缓存,但是并没有解决我们想动态使用缓存的目的,目前我的项目使用了如下两种方式处理缓存:
方式一 ,使用是否使用缓存标识
在路由文件router.js里给每个路由添加meta信息,标识是否使用缓存。
meta: {isUseCache: false,//不使用缓存keepAlive: true
}
使用方式:
A->B,B不能缓存;B->A,A缓存。
- (1)A页面:
beforeRouteLeave(to, from, next) {// 设置下一个路由的 metaif(to.path=='/B'){to.meta.isUseCache = false;}next();
},
activated(){if(!this.$route.meta.isUseCache){this.getData();}
}
- (2) B页面
beforeRouteLeave(to, from, next) {// 设置下一个路由的 metaif(to.path=='/A'){to.meta.isUseCache = true;}next();
},
activated(){if(!this.$route.meta.isUseCache){this.getData();}
}
方式二,强制清除缓存。
这种方式是从网上找的一种方式,使用了vue内部组件之后,不在支持动态销毁组件,缓存一直存在,只能从源头上下手,清掉缓存。
export const removeCatch = {beforeRouteLeave:function(to, from, next){if (from && from.meta.rank && to.meta.rank && from.meta.rank>to.meta.rank){//此处判断是如果返回上一层,你可以根据自己的业务更改此处的判断逻辑,酌情决定是否摧毁本层缓存。if (this.$vnode && this.$vnode.data.keepAlive){if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache){if (this.$vnode.componentOptions){var key = this.$vnode.key == null? this.$vnode.componentOptions.Ctor.cid (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : ''): this.$vnode.key;var cache = this.$vnode.parent.componentInstance.cache;var keys = this.$vnode.parent.componentInstance.keys;if (cache[key]){if (keys.length) {var index = keys.indexOf(key);if (index > -1) {keys.splice(index, 1);}}delete cache[key];}}}}this.$destroy();}next();}
};
在需要清掉缓存的页面混合引入该js即可。 原文链接
结语
移动端的缓存真是麻烦啊,前进后退,什么时候使用缓存,什么时候不使用缓存,都需要经过仔细的处理,不然就会有想不到的问题。不过经过这次项目,也积累了一定的经验。如果有大佬有别的更好的解决办法,还请告知,多谢!还是那句话,有问题就去解决,不要害怕问题,解决了问题,你就会成长!
顺带推广一下自己博客,同步更新!
vue移动端项目缓存问题实践相关推荐
- Vue 移动端项目创建
前言 移动端我们一般通过Vue脚手架手动自定义创建项目, 只需要Node环境我们就可以通过npm下载Vue脚手架,通过命令创建项目. npm下载脚手架 npm install -g @vue/cli ...
- vue移动端项目日历组件,月周切换,点击进入上/下一个月
项目场景: Vue移动端项目的日历组件,移动端如果没有别的特别要求,一般用vant中的日历组件就OK,这里用的另一个.组件是网上找的,原网址:vue-hash-calendar,需要的请自行去看. 我 ...
- Vue移动端项目---尚硅谷外卖
文章目录 Vue移动端项目--尚硅谷外卖 项目目录结构介绍 移动端适配 头部和底部导航 登录注册页面 密码登录 短信登录 Profile页面 未登录 已登录 Msite页面 首页导航 ShopList ...
- vue移动端项目实现真机调试
在vue移动端项目中,我们可以通过真机调试来更好的看到项目实际运行在移动端的效果. 下面就来介绍一下实现的方法: 1.使手机与电脑连接在同一个wifi下 2.修改vue.config.js文件配置 将 ...
- vue移动端项目实现定位
vue移动端项目实现定位 腾讯地图官方地址 <template><div><!-- 定义地图显示容器 --><div id="container&q ...
- vue移动端项目基础框架搭建
本文章,主要提供vue移动端项目基础框架搭建思路,每个独立的模块网上有很多相关的文档. 移动端vue项目基础框架搭建,主要包括6个步骤 项目使用的脚手架vue-cli搭建模板,2.使用淘宝lib-fl ...
- 2021-03-24 从零开始搭建vue移动端项目
从零开始搭建vue移动端项目 一.Vue项目搭建 二.使用步骤 1.初始化 2.路由 3.Vuex(状态管理) 4.Axios(数据请求模块) 5.使用Less 6.移动端适配 7.注意事项 8.移动 ...
- Vue移动端项目(一)
一.项目初始化 目标 能使用 Vue CLI 创建项目 了解 Vant 组件库的导入方式 掌握制作使用字体图标的方式 掌握如何在 Vue 项目中处理 REM 适配 理解 axios 请求模块的封装 模 ...
- 从零开始搭建vue移动端项目到上线的步骤
初始化项目 1.在安装了node.js的前提下,使用以下命令 npm install --g vue-cli 2.在将要构建项目的目录下 vue init webpack myproject(项目目录 ...
最新文章
- AI艺术家带雕塑作品参展被海关扣押,只因摄像头眼睛被指涉及间谍行为?
- 《你必须知道的.NET》,蓄势待发;博客园开发者征途,又添新作
- 弹簧压缩 时间 matlab,用matlab解决弹簧振子摆动与时间的关系
- linux非root用户启动桌面
- 设置堆内存大小_jmap和jhat命令行工具的配合使用,更好的掌握堆内存状况
- H264实时编码及NALU,RTP传输(ZZ)
- excel中vlookup函数的使用方法_vlookup函数功能非常强大,那在Python中如何实现?
- 阿里 2 年内市值将赶超苹果;腾讯回应吃鸡下架;滴滴恢复深夜运营 | 极客头条...
- oracle创建用户和角色、管理授权以及表空间操作
- 工作中常用Linux命令总结一
- 主成分分析与因子分析及SPSS实现
- eclipse 语言包下载 中文汉化
- Python Algorithms Learning Notes(1)--Asymptotic Notations
- MaxScript 例子 渲染
- 《陶哲轩实分析》——给读者的一点建议
- Hive调优之 union all 效率低的问题解决
- 自己的小程序修修补补
- 旅行,写作,编程 :IT文艺青年的生活态度
- python可嵌入和可执行版本_Python可嵌入zip
- Dynamic Programming(1)
热门文章
- mysql自定义函数多参数_自定义mysql函数 - 无法传递参数
- ESP8266—“ICACHE_FLASH_ATTR”宏
- python基础-网络基础知识和网络编程
- linux安装mysql(shell一键安装)
- linux下解析域名
- 利用Aspose.Word控件实现Word文档的操作
- 2000错误信息:MMC创建无法管理单元。
- HTML--HTML对象的关于位置和大小的属性的图解
- 华南理工网络计算机基础知识,2019年华南理工大学网络教育计算机基础随堂练习题第一章.docx...
- ubuntu cd 改变路径