1.vue-router中增加mate.keepAlive和deepth属性
{
path: '/',
name: 'home',
component: HomeView,
meta: {
keepAlive: false,
deepth: 1,
}
},
{
path: '/list',
name: 'list',
component: ListView,
meta: {
keepAlive: true,
deepth: 2,
}
},
{
path: '/info',
name: 'info',
component: InfoView,
meta: {
keepAlive: false,
deepth: 3,
}
},
2.App.vue页面template中增加keep-alive
<template>
<router-view v-slot="{ Component, route }">
<keep-alive :include="include">
<component :is="Component" v-if="route.meta.keepAlive" />
</keep-alive>
<component :is="Component" v-if="!route.meta.keepAlive" />
</router-view>
</template>
3.App.vue页面js中增加逻辑
export default {
setup() {
const router = useRouter();
const data = reactive({
include: []
});
router.afterEach((to, from) => {
if (to.meta.keepAlive) {
!data.include.includes(to.name) && data.include.push(to.name);
}
if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {
var index = data.include.indexOf(from.name);
index !== -1 && data.include.splice(index, 1);
}
})
return { ...toRefs(data) }
}
}
4.在缓存实际页面增加name属性和路由中name设置的相同
export default {
name: 'list',
components: {},
setup(){}
}
5.遇到的问题