online-order-h5/src/App.vue

<template>
  <div id="app">
    <router-view v-slot="{ Component, route }">
      <transition name="fade" mode="out-in">
        <keep-alive :include="keepAlivePages">
          <component :is="Component" :key="route.path" />
        </keep-alive>
      </transition>
    </router-view>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useEnv } from '@/composables/useEnv'

const { initEnv } = useEnv()

// 需要缓存的页面组件名称
// 根据路由配置中的 meta.keepAlive 属性动态设置
const keepAlivePages = ref(['Index', 'Menu'])

onMounted(async () => {
  // 初始化环境检测
  await initEnv()
})
</script>

<style>
#app {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 页面切换过渡效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>