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

<script setup>
import { constantMobileRoutes } from '@/router'
// 递归判断有 children 往里走找到所有路由对象 meta 的 keepAlive 是 true 的然后返回 meta 同级的 name 名字的值，组成一个数组
const cachedViews = []
function getKeepAliveName(routes) {
  routes.forEach((item) => {
    if (item.meta?.keepAlive) {
      cachedViews.push(item.name)
    }
    if (item.children) {
      getKeepAliveName(item.children)
    }
  })
}
getKeepAliveName(constantMobileRoutes)
</script>
