[筆記] Vue3 Keep-alive 的操作注意事項 @地瓜大的飛翔旅程

章節連結

重點
參考資料

Vue3 的 Keep-alive 可以讓元件得以暫存，不過使用上若搭配 vue-router 進行頁面快取時，在頁面的名稱上會需要注意一下。

重點

1. 透過 <router-view> 中對外暴露出的 v-slot 取得 Compone 和 route，進而包裹在 <keep-alive> 中
2. 透過傳入字串陣列，來讓 component 決定哪一些要綁定、哪一些排外
3. 字串的大小寫是會影響比對的。換言之：router 的 name 名稱和該頁面元件的 name 需要完全一模一樣，才能夠達成快取

// 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'
}