【Vue3+Ts】简单路由配置页面缓存keepAlive可选控制

router.ts路由文件配置

const routes = [
  {
    path: "/",
    name: "home",
    meta: {
      title: "首页",
      keepAlive: true, // 主要代码
    },
    component: () => import("@/view/Home/index.vue"),
  }
]

App.vue配置

<script setup lang="ts">
import { computed } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const cachedComponents = computed<any>(() => {
  return [route.meta.keepAlive ? route.name : null];
});
</script>

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

<style lang="scss"></style>