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) => {// 把要缓存的页面加入缓存列表// 如果 要 to(进入) 的页面是需要 keepAlive 缓存的，把 name push 进 include数组if (to.meta.keepAlive) {!data.include.includes(to.name) && data.include.push(to.name);}// 解决从首页进入列表页面的时候，读取的是缓存页面，如：// 第一次从首页进入列表页面，读取新数据，缓存起来，然后，返回首页// 第二次再进入列表页面，读取的是第一次进入的缓存，不更新。// 如果 要 form(离开) 的页面是 keepAlive缓存的，// 再根据 deepth 来判断是前进还是后退// 如果是后退，就把当前页面从缓存列中删除，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设置的相同
// List.vue
export default {name: 'list', // 对应路由中name:'list'的值components: {},setup(){}
}
5.遇到的问题
1.一开始直接用meta.keepAlive的值判断是否需要缓存，导致从列表进入详情，再从详情返回列表的时候是对的，再从列表返回首页，再从首页进入列表就读取缓存不更新了。
2.使用keep-alive的include属性解决1中的问题。但是明明细逻辑里已经把要缓存的name加入到缓存列表中了，就是不生效。
3.在要缓存的组件中，加入name属性解决2中的问题。
)
