1、路由
????????<keep-alive>
? ? ? ? ? <router-view v-if="$route.meta.notCache"></router-view>
? ? ? ? ? </keep-alive>
? ? ? ? ? <router-view v-if="!$route.meta.notCache"></router-view>
2、數(shù)據(jù)狀態(tài)
? ? ? ?{
? ? path: '/ST01',
? ? name: 'ST01',
? ? component: Main,
? ? children: [{
? ? ? path: '/ST01',
? ? ? meta: {
? ? ? ? moduleCode: '001',
? ? ? ? hideInMenu: true,
? ? ? ? title: '學(xué)員列表',
? ? ? ? notCache: true? ? ? ? ? ? //? 這里是否緩存
? ? ? },
? ? ? name: 'ST01',
? ? ? component: () => import('../views/pages/ST01.vue')
? ? }]
? }
3、在需要關(guān)閉頁面時(shí)，同時(shí)關(guān)閉緩存的情況下，
4、然后對應(yīng)的每個(gè)需要緩存頁面中
beforeRouteEnter(to, from, next){
? //設(shè)置頁面緩存
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();
? }
