APPmain.vue
<template>
<section class="app-main">
<transition name="fade-transform" mode="out-in">
<router-view :key="key" />
<keep-alive>
<router-view v-if="$route.meta.keepAlive" :key="key" />
</keep-alive>
</transition>
<transition name="fade-transform" mode="out-in">
<router-view v-if="!$route.meta.keepAlive" :key="key" />
</transition>
</section>
</template>
route.js
meta: { title: '我的', icon: 'el-icon-user', keepAlive: true, isUseCache: false },
meta: { title: '全部', icon: 'el-icon-s-custom', keepAlive: true, isUseCache: false },
详情页xxxx.vue文件使用
created() {
this.id = this.$route.params.id
},
beforeRouteLeave (to, from, next) {
if (to.name == 'ClientListMyList' || to.name == 'ClientListAllList') {
to.meta.isUseCache = true;
}
next();
},
列表页xxxx.vue文件使用
activated() {
if (!this.$route.meta.isUseCache) {
this.resetSearch();
this.$route.meta.isUseCache = false
} else {
this._fetchData()
}
},
beforeRouteLeave (to, from, next) {
if (to.name != 'AllClientDetails') {
from.meta.isUseCache = false;
}
next();
},
activated() {
if (!this.$route.meta.isUseCache) {
this.resetSearch();
this.$route.meta.isUseCache = false
}
},
beforeRouteLeave (to, from, next) {
if (to.name != 'MyClientDetails') {
from.meta.isUseCache = false;
}
next();
},