vue3 router-view keep-alive

在 Vue3 中，使用 `<router-view>` 渲染路由组件时，可以通过使用 `<keep-alive>` 组件来缓存已经加载的组件，以提高性能。

以下是如何在 Vue3 中使用 `<router-view>` 和 `<keep-alive>`：

1. 在 `router/index.js` 中配置路由时，为需要缓存的路由添加 `meta` 属性，并设置 `meta.keepAlive` 为 `true`，例如：

   const routes = [
     {
       path: '/',
       name: 'Home',
       component: Home,
       meta: {
         keepAlive: true
       }
     },
     // other routes
   ];

2. 在父组件模板中使用 `<router-view>` 和 `<keep-alive>` 组件，例如：

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

注意：在 Vue3 中，需要使用 `v-slot` 来获取 `<router-view>` 的 `Component` 属性。

这样，当用户访问需要缓存的路由时，路由组件会被缓存起来，下次访问时可以直接使用缓存的组件，从而提高性能。