一、業(yè)務場景示例
頁面A: 數(shù)據(jù)列表，有一些查詢條件，如查詢條件區(qū)域，查詢結果為區(qū)域信息列表
頁面B: 數(shù)據(jù)詳情，點擊列表任意一條記錄，跳轉到對應的區(qū)域詳情
期望：在頁面B，點擊瀏覽器返回按鈕，顯示上一次頁面A查詢結果與查詢條件（最好不從新請求）
二、實現(xiàn)
利用vue的keep-alive，使用keep-alive可以是組件在第一次創(chuàng)建時被緩存下來，離開頁面時不銷毀
使用了
keep-alive生命周期
1.activated：頁面第一次進入的時候，鉤子觸發(fā)的順序是created->mounted->activated
2.deactivated ：頁面退出的時候會觸發(fā)deactivated，當再次前進或者后退的時候只觸發(fā)activated
修改路由注冊文件
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component"
v-if="$route.meta.keepAlive"
:key="$route.path" />
</keep-alive>
<component :is="Component"
v-if="!$route.meta.keepAlive" />
</router-view>
在需要緩存的頁面路由中配置keepAlive: true
{
name: 'A',
path: '/A',
component: () => import(/* webpackChunkName: "home" */ '@/views/A.vue'),
meta: {
keepAlive: true,
},
}
添加統(tǒng)一判斷是否是返回
router.afterEach((to) => { // 一定要再afterEach中判斷而不是beforeEach，因為beforeEach在點擊返回之后獲取到的值不準確，每返回一次，會獲取到延后一次的to、history
if (window.history.state && window.history.state.forward) { // 或者判斷 to.forward,window.history.state.forward是vue-router寫入的，當返回或前進的時候才會有值
to.meta.isBack = true;
} else {
to.meta.isBack = false;
}
});
在使用的頁面
const isInit = ref(true); // 解決window.history.state.forward是否存在判斷是否返回不準確問題
onMounted(() => {
submitSearchForm(); // 請求查詢數(shù)據(jù)
});
const routes = useRoute();
const searchFormRef = ref();
onActivated(() => {
if (!routes.meta.isBack && !isInit.value) { // 如果不是返回還是需要請求更新數(shù)據(jù)的
searchFormRef.value.resetFields(); // 這是ant-design-vue提供的重置表單的方法，如果沒用，可以手動重置
submitSearchForm(); // 請求查詢數(shù)據(jù)
}
isInit .value = false;
});
三、采坑總結
1.不要動態(tài)修改to.meta.keepAlive的值控制是否緩存。
會存在第一次將to.meta.keepAlive設置為true是還是會發(fā)送請求，因為第一次是創(chuàng)建組件，沒有緩存，需要緩存后，下一次進入才不會發(fā)送請求。因為如果最開始進入的時候to.meta.keepAlive值為false的話，渲染的是沒有使用keep-alive的組件。
2.通過forward判斷是否是返回，需要再afterEach中
因為beforeEach在點擊返回之后獲取到的值不準確，每點擊一次返回，會獲取到延后一次的to、history中的值
3.需要再中間中配置key值，來表示組件的唯一性和對應關系，如：:key="$route.path"
如果不配置key值，當多個頁面配置keepAlive:true時，在切換緩存頁面時會報錯Uncaught (in promise) TypeError: parentComponent.ctx.deactivate is not a function
