1：使用場景
? ? ?從列表頁跳轉至不同的詳情頁面，對這些詳情頁面分別進行緩存
2：核心代碼
2.1: 配置路由文件
在路由文件里對需要進行緩存的路由對象添加meta 屬性
?// 需要緩存的詳情頁面路由
? {
? ? name: detail,
? ? path: '/myRouter/detail', // 路徑
? ? component: () => import('../views/abc/detail.vue'),
? ? meta: {
? ? ? keepAlive: true, // 是否被緩存
? ? },
? },
2.2: app頁面增加緩存邏輯
<template>
? <el-config-provider :locale="locale">
? ? <!-- 有條件的進行緩存 -->
? ? <transition mode="out-in" name="fade">
? ? ? <router-view v-slot="{ Component }">
? ? ? ? <keep-alive :include="includeList">
? ? ? ? ? <component :is="wrap(route?.name , route.query, Component)" :key="route.fullPath" />
? ? ? ? </keep-alive>
? ? ? </router-view>
? ? </transition>
? </el-config-provider>
</template>
wrap 方法
const wrapperMap = new Map();const wrap = (name:any, query:any, component:any) => {let wrapper;let wrapperName;if(query.catchName){wrapperName = name + '-' + query.catchName;}else {wrapperName = name;}if (wrapperMap.has(wrapperName)) {wrapper = wrapperMap.get(wrapperName);} else {wrapper = {name: wrapperName,render() {return h('div', { className: 'vaf-page-wrapper' }, component);},};wrapperMap.set(wrapperName, wrapper);}return h(wrapper);};watch 監聽對于route.query 是否存在catchName 參數的路由分別進行緩存
// 監聽路由，判斷頁面是否需要緩存watch(() => route,(newVal: any, oldVal) => {if (newVal.query?.catchName) {if (newVal.meta.keepAlive && !state.includeList.includes(newVal.name + '-' + newVal.query?.catchName)) {state.includeList.push(newVal.name + '-' + newVal.query?.catchName);}} else if (newVal.meta.keepAlive && !state.includeList.includes(newVal.name)) {state.includeList.push(newVal.name);}},{deep: true, // 開啟深度監聽},);2.3: 在列表頁面的查看點擊方法中配置路由添加query 傳參 catchName
注：上面為核心代碼邏輯，需要根據實際情況進行調整。
)
