vue2中keep-alive缓存指定路由组件

在 Vue2 中，你可以使用 `keep-alive` 组件来缓存指定的路由组件。`keep-alive` 组件可以缓存被包裹的组件的状态，以避免每次切换到该组件时都重新渲染。

要缓存指定的路由组件，你需要在路由配置中给该路由组件添加 `meta` 字段，然后在 `keep-alive` 组件中使用 `include` 或 `exclude` 属性来指定需要缓存的路由组件。具体实现步骤如下：

1. 在路由配置中给需要缓存的路由组件添加 `meta` 字段，例如：

   const routes = [
     {
       path: '/home',
       component: Home,
       meta: {
         keepAlive: true // 需要缓存该组件
       }
     },
     {
       path: '/about',
       component: About
     }
   ]

2. 在使用 `keep-alive` 组件的父组件中，使用 `include` 或 `exclude` 属性来指定需要缓存的路由组件，例如：

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

   <script>
   export default {
     computed: {
       cachedViews() {
         // 获取需要缓存的路由组件
         return this.$route.matched.filter(route => route.meta.keepAlive).map(route => route.component)
       }
     }
   }
   </script>

在上面的例子中，`cachedViews` 计算属性返回了所有需要缓存的路由组件，然后在 `keep-alive` 组件中使用了 `include` 属性来指定需要缓存的路由组件。

如果你想排除某些路由组件，可以使用 `exclude` 属性来指定不需要缓存的路由组件。