<template>
<div id="app">
<keep-alive :include="include">
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
title: document.title,
include: [],
};
},
watch: {
$route(to, from) {
if (to.meta.keepAlive) {
!this.include.includes(to.name) && this.include.push(to.name);
}
if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {
let index = this.include.indexOf(from.name);
index !== -1 && this.include.splice(index, 1);
}
},
},
created() {},
methods: {},
};
</script>
在router.js中设置
{
path: 'a/b',
name: 'b',
component: b,
meta: {
deepth: 1,
keepAlive: true
}
},