vue3中组件保活＜keep-alive＞的使用

一、在vue-router中使用，保活一个路由组件

1.一般写法

vue3中，对于这个问题，写法有点不一样。

<router-view>、<keep-alive> 和 <transition>

transition 和 keep-alive 现在必须通过 v-slot API 在 RouterView 内部使用，下面是一个案例：

<router-view v-slot="{ Component,route }">
  <transition>
    <keep-alive>
      <component :is="Component" v-if="route.meta.keepalive==true"  :key="route.path" />
    </keep-alive>
     <component :is="Component" v-if="route.meta.keepalive==false"  :key="route.path" />
  </transition>
</router-view>

原因: 这是一个必要的变化。详见 related RFC.
所以说这里还有其他的信息，transition过度效果，现在也要用这种方式来写了。

2.推荐写法

keep-alive

Props：
    include - string | RegExp | Array。只有名称匹配的组件会被缓存。
    exclude - string | RegExp | Array。任何名称匹配的组件都不会被缓存。
    max - number | string。最多可以缓存多少组件实例。

可以看到，keepAlive本身具有include可以匹配
比如我有一个routes：

const routes = [{
    path:"/",
    component:layout,
    children:[
        {
            path:"404",
            name:"404",
            meta:{title:"404",ismenu:false,keepalive:false},
            component:()=> import("../pages/404.vue")
        },
        {
            path:"keepAlivePage",
            name:"keepAlivePage",
            meta:{title:"保活页面",ismenu:true,keepalive:true},
            component:()=> import("../pages/keepAlivePage.vue")
        }
    ]
}];

在组件里面去引用，只需要过滤出一个需要保活的name数据就可以，比如说“keepAlivePage”这个组件，组件要定义name属性（并不是指上面路由表routes里面那个name，而是keepAlivePage.vue的name）

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components
选项的键值)。匿名组件不能被匹配。

<template>
  <router-view v-slot="{ Component, route }">
    <keep-alive :include="keepaliveRoutes">
      <component :is="Component" :key="route.path" />
    </keep-alive>
  </router-view>

</template>

<script lang="ts">
import { defineComponent } from "vue";
import { routes } from "../router"
interface idata {
  keepaliveRoutes: Array<string>,
}
export default defineComponent({
  data(): idata {
    return {
      keepaliveRoutes:[],
    }
  },
  components: {
  },
  created() {
    routes[0].children.forEach(e=>{
      if(e.meta.keepalive == true){
          this.keepaliveRoutes.push(e.path)
      }
    })
  },
});
</script>