vue移动端项目缓存问题的示例分析-创新互联
这篇文章给大家分享的是有关vue移动端项目缓存问题的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
在洞头等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供
网站设计、成都做网站 网站设计制作按需求定制设计,公司网站建设,企业网站建设,
成都品牌网站建设,
营销型网站,
外贸网站制作,洞头网站建设费用合理。
先描述下问题场景：A页面->B页面->C页面。假设A页面是列表页面，B页面是列表详情页面，C页面是操作改变B页面的一些东西，进行提交类似的操作。A页面进入B页面，应该根据不同的列表item显示不一样的详情，从B进入C，也应该根据item的标识比如ID展示不一样的内容，在C页面操作后，返回B页面，B页面数据发生变化。这个时候会有两种情况：
另一种情况发生在写邮件的页面中，添加收件人，选人之后，继续添加，之前添加的联系人应该存在。但是从写邮件页面返回邮件列表再次进入写邮件页面，之前添加过的联系人数据就不应该存在了，这里就涉及到如何处理缓存，何时使用缓存，何时清除缓存的问题了。
目前项目整体结构如下：
虽然官方提供了include，exclude，可以让我们决定哪些组件使用缓存，哪些不使用缓存，但是并没有解决我们想动态使用缓存的目的，目前我的项目使用了如下两种方式处理缓存：
方式一 ，使用是否使用缓存标识
在路由文件router.js里给每个路由添加meta信息，标识是否使用缓存。
meta: {
isUseCache: false,//不使用缓存
keepAlive: true
}使用方式：
A->B，B不能缓存;B->A,A缓存。
（1）A页面：
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
if(to.path=='/B'){
to.meta.isUseCache = false;
}
next();
},
activated(){
if(!this.$route.meta.isUseCache){
this.getData();
}
}(2) B页面
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
if(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移动端项目缓存问题的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
网站标题：vue移动端项目缓存问题的示例分析-创新互联
本文地址：
http://cdkjz.cn/article/dhdsjd.html
