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中的問題。
)
