vue3 keep-alive用法

<template>
  <div>
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view v-slot="{ Component }">
      <transition>
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </transition>
    </router-view>
  </div>
</template>

APP.vue

<template>
  <div class="home">
    <h1>title-------{{num}}</h1>
    <button @click="addNum">添加</button>
  </div>
</template>

<script>
import { ref} from 'vue'
export default {
  setup(){
    let num = ref(1);
    const addNum = ()=>{
      num.value +=1
    }
    return {
      num,
      addNum
    }
  }
}
</script>

home.vue

<template>
    <div>
        About page
    </div>
</template>
<script>
export default {
    
}
</script>
<style scoped>

</style>

about.vue

路由切换后home页状态值没有被销毁