【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>

感谢你的阅读，如对你有帮助请收藏+关注！
只分享干货实战和精品，从不啰嗦！！！
如某处不对请留言评论，欢迎指正~
博主可收徒、常玩QQ飞车，可一起来玩玩鸭~