vue3中router-view包裹keepalive结合使用

在 Vue 3 中，`<router-view>` 和 `v-slot:default` 结合 `keep-alive` 组件可以有效地管理动态组件的缓存和复用，提高性能。当你有大量相似但需要独立状态的组件，并希望它们在切换时不每次都重新渲染时，这非常有用。

1. **`router-view`**：这是 Vue Router 的核心组件，用于显示当前路由对应的组件内容。

2. **`keep-alive`**：Vue 提供的内置组件，它让动态组件在条件改变前保持在内存中，避免不必要的重新渲染。

3. **结合使用**：将 `keep-alive` 包裹在 `<router-view>` 内部，然后给 `keep-alive` 设置一个 `v-slot:default`，这样每个进入的组件都会被视为一个单独的“活”实例。当用户导航到另一个组件时，离开的那个组件会被缓存在 keep-alive 中，直到再次访问。

<template>
  <div>
    <keep-alive>
      <slot name="default"></slot>
    </keep-alive>
  </div>
</template>

<script>
export default {
  components: {
    YourComponentA,
    YourComponentB,
    // 其他组件...
  },
  // 如果你想缓存特定的组件，可以这样引用
  <template v-slot="{ component, route }">
    <component :is="route.name" :key="route.path" />
  </template>
};
</script>