程式碼如下

<template>
<!-- include 可以用逗號分隔字串、正則表示式或一個數組來表示 -->
  <router-view v-slot="{ Component }">
    <keep-alive :include="cacheViews">
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'APP',
  setup() {
    const store = useStore()
    const cacheViews = computed(() => store.state.app.cachedViews)   // store.state.app.cachedViews 是 需要快取的 路由元件name 的陣列
     // const cacheViews = computed(() => store.state.app.cachedViews.join(',')) // 逗號分隔字串模式 

    return {
      cacheViews
    }
  }
})
</script>
 

頁面表現： 頁面能正常切換，但是不觸發activated deactivated 生命週期

原因： store.state.app.cachedViews 返回的是一個 Proxy， 代理了陣列，並不是陣列本身

修改：將 的 cacheViews 陣列模式改為 逗號分隔字串模式 就正常了
即： const cacheViews = computed(() => store.state.app.cachedViews.join(','))

參考：
https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive
https://next.router.vuejs.org/zh/guide/migration/#router-view-、-keep-alive-和-transition