vue html缓存问题,vue页面缓存问题，开启时缓存页面，关闭时关闭缓存，再开启时刷新原有缓存页面...

1、路由

2、数据状态

{

path: '/ST01',

name: 'ST01',

component: Main,

children: [{

path: '/ST01',

meta: {

moduleCode: '001',

hideInMenu: true,

title: '学员列表',

notCache: true            //  这里是否缓存

},

name: 'ST01',

component: () => import('../views/pages/ST01.vue')

}]

}

3、在需要关闭页面时，同时关闭缓存的情况下，

4、然后对应的每个需要缓存页面中

beforeRouteEnter(to, from, next){

//设置页面缓存

to.meta.notCache = true;

next();

},

beforeRouteLeave(to, from, next) {

//删除页面缓存

// from.name是路由中name，也就是页面的路由名

if (from.name === 'ST01' && !from.meta.notCache) {

if(this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache){

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();

}