3、Vue 3 - Vue Router 使用实录 : keep-alive 路由缓存

为什么要使用路由缓存？

假设：有 a 和 b 两个路由，当在 a 路由中的表单中输入信息后，切换到 b 路由后，在回到到 a 路由，此时 a 路由中输入的表单信息也没有了。

使用路由缓存可以保留信息。

使用 keep-alive 路由缓存

src/App.vue

<template>
  <div class="container text-center">
    <h3>Vue Router</h3>
    <RouterLink to="/">首页</RouterLink>
    <RouterLink to="/about">关于</RouterLink>

    <!-- 使用 keep-alive 缓存组件 -->
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
</template>

注意：keep-alive 的使用方法是固定的。router-view、<transition>、keep-alive。其中 transition 和 keep-alive 必须通过v-slot API 在 router-view 中使用，如形式如下：

<!-- v-slot="{ Component }" 是固定的 -->
<router-view v-slot="{ Component }">
    <!-- 若没有使用动画，可以不使用 transition -->s
    <transition>
        <keep-alive>
            <!-- 组件切换，也是固定的 -->
        	<component :is="Component" />
        </keep-alive>
    </transition>
</router-view>