<template>
  <router-view class="app-page" v-slot="{ Component, route }">
    <transition :name="state.transitionName">
      <keep-alive :exclude="state.excludeViews">
        <component :is="handleComponent(Component, route)" :key="$route.fullPath" />
      </keep-alive>
    </transition>
  </router-view>
</template>

<script lang="ts" setup>
import { RouteRecordNormalized, RouteRecordName } from 'vue-router'
import animateRouter from '@mobile/router/animateRouter'

const { state } = animateRouter;

// 手动给组件添加 name 属性，处理缓存 exclude 无效的问题
const handleComponent = (component: Record<'type', { name: RouteRecordName | undefined }>, route: RouteRecordNormalized) => {
  if (component) {
    component.type.name = route.name;
  }
  return component;
}
</script>

<style lang="less">
@import './index.less';
</style>