vue3 動態修改 keepAlive
阿新 • • 發佈:2021-11-25
需求場景:
跳轉邏輯
A
跳轉B
,B
頁面 表單填寫過程中 跳轉 選擇地址等額選項時,我們需要將B
頁面 進行 keepAlive 快取,達到 返回時不重新渲染
但是我們需要考慮 從
A
頁面到B
頁面 需要全部重新載入,此類場景 我們需要 動態的去控制 keepAlive
流程圖 A
頁面 > B
頁面(表單頁面) < 互相跳轉 > C
頁面(額外選項 選擇地址類似)
App.vue
<!-- vue3.0配置 -->
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" :key="route.name" v-if="route.meta.keepAlive" />
</keep-alive>
<component :is="Component" :key="route.name" v-if="!route.meta.keepAlive" />
</router-view>
複製程式碼
import { useRoute } from 'vue-router';
export default defineComponent({
name: 'App',
setup(props ) {
const route = useRoute();
return { route }
}
})
複製程式碼
router.ts
// ...
{
path: 'path/BComponent',
name: 'BComponent',
component: BComponent,
meta: {
title: 'Page B',
keepAlive: true
}
},
{
path: 'path/CComponent',
name: 'CComponent',
component: CComponent,
meta: {
title: 'Page C',
keepAlive: false
}
},
複製程式碼
B.vue
import { useRouter, useRoute, onBeforeRouteLeave } from 'vue-router';
export default defineComponent({
name: 'B',
setup(props) {
const route = useRoute();
const router = useRouter();
const changeRouterKeepAlive = (name: string, keepAlive: boolean) => {
router.options.routes.map((item: any) => {
if (item.name === name) {
item.meta.keepAlive = keepAlive;
}
});
};
onBeforeRouteLeave((to, from) => {
if (to.name !== 'c') {
// 不是去 c 頁面,不快取
changeRouterKeepAlive(from.name as string, false);
} else {
changeRouterKeepAlive(from.name as string, true);
}
});
return { };
}
})
複製程式碼