vue3中keep-alive和vue-router的结合使用方式

<template>
  <div class="home">
    <input type="text" name="" id="">
  </div>
</template>
<script>
export default {
  name: 'Home',
  components: {},
  created() {
    console.log('Home被创建');
  },
  unmounted() {
    console.log('Home被销毁');
  }
}
</script>

<template>
  <div class="about">
    <input type="text">
  </div>
</template>
<script>
export default {
  name: 'About',
  components: {},
  created() {
    console.log('About被创建');
  },
  unmounted() {
    console.log('About被销毁');
  }
}
</script>

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
</template>

<keep-alive>
      <router-view />
</keep-alive>

<keep-alive>
      <router-view />
</keep-alive>

<router-view v-slot="{ Component }">
  <transition>
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view v-slot="{ Component }">
    <transition>
    //About组件将会被销毁，而Home组件则不会
      <keep-alive exclude="About">             
        <component :is="Component" />
      </keep-alive>
    </transition>
  </router-view>
</template>