路由的缓存 keep-alive

最近做到一个小deomo,政府相关的留言功能，我用的vue3的框架，element-plus组件库，用到tabs，分页，表单组件，需要有分页，点击查看详情，有两种状态，办理中，已回复，当时我做到跳转详情的时候，做到返回主页面，我想要的结果是，在当前页面下的tabs下点击详情后，返回过来，不会发起请求。位置就在当前点击的位置。

 <router-view v-slot="{ Component }">
      <keep-alive :include="['Home']">
        <component :is="Component" />
      </keep-alive>
  </router-view>

include里放的是需要缓存的路由，exclude里放的是不要缓存的路由

 path: '/home', name: 'Home', component: () => import('../views/Home/Index.vue')

这是我路由配置，我开始以为这样就能生效，结果不能。

在vue3这样并不能生效，还需要在页面使用name值才能生效

<script>
export default {
  name: "Home",
};
</script>

这里就是vue2的写法，我就没想到，哈哈，不过最终还是实现了----我这只是个小deomo所以写的比较简单，若在一整个项目中，则需要一般在路由mata中配置，通过v-if来判断，有很多方式的，这里就不一一演示了

另外它还有两个生命周期

当使用 keep-alive 组件缓存一个组件时，如果需要在组件被缓存时执行一些操作，可以使用 activated 钩子函数，在组件被激活(被缓存并且被展示)时触发。如果需要在组件被缓存时清除一些数据或状态，可以使用 deactivated 钩子函数，在组件被停用(被缓存但不被展示)时触发。