Vue3 的 Keep-alive 可以讓元件得以暫存，不過使用上若搭配 vue-router 進行頁面快取時，在頁面的名稱上會需要注意一下。
重點
1. 透過 <router-view> 中對外暴露出的 v-slot 取得 Compone 和 route，進而包裹在 <keep-alive> 中
2. 透過傳入字串陣列，來讓 component 決定哪一些要綁定、哪一些排外
3. 字串的大小寫是會影響比對的。換言之：router 的 name 名稱和該頁面元件的 name 需要完全一模一樣，才能夠達成快取
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// App.vue <router-view v-slot="{ Component, route }"> <transition name="router-fade" mode="out-in"> <keep-alive :include="cachedViews"> <component :is="Component" :key="route.fullPath" /> </keep-alive> </transition> </router-view> // demo.vue <script lang="ts"> export default { name: 'Demo' } </script> // router const routes = { path: 'index', component: import('@/layout/index.vue'), name: 'Demo' } |
