liveh5-nuxt/app/app.vue

<script setup>
import {useI18n} from 'vue-i18n'
import {message} from '@/components/x-message/useMessage.js'
// message.success('success')
useHead({
  title: useI18n().t('appSetting.appName'),
  meta: [
    {name: 'description', content: useI18n().t('appSetting.appDescription')},
    {name: 'keywords', content: useI18n().t('appSetting.appKeyWords')},
  ],
})


// 添加路由中间件来处理过渡方向
const router = useRouter()
const route = useRoute()
const slideDirection = ref('slide-left')

// 记录路由历史
const routeHistory = ref([])

router.beforeEach((to, from) => {
  // 记录路由历史
  routeHistory.value.push(from.path)

  // 如果是返回操作（在历史记录中找到目标路由）
  if (routeHistory.value.includes(to.path)) {
    slideDirection.value = 'slide-right'
    // 清除历史记录到返回的位置
    const index = routeHistory.value.indexOf(to.path)
    routeHistory.value = routeHistory.value.slice(0, index)
  } else {
    slideDirection.value = 'slide-left'
  }
})

// 提供过渡名称给页面组件
provide('slideDirection', slideDirection)
</script>

<template>
  <VanConfigProvider>
    <NuxtLoadingIndicator
        color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)"/>
    <NuxtLayout>
      <NuxtPage :transition="{
        name: slideDirection
      }"/>
    </NuxtLayout>
  </VanConfigProvider>
</template>

<style>
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  width: 100%;
}

.slide-left-enter-from {
  transform: translateX(100%);
}

.slide-left-leave-to {
  transform: translateX(-100%);
}

.slide-right-enter-from {
  transform: translateX(-100%);
}

.slide-right-leave-to {
  transform: translateX(100%);
}

:root {
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
}
</style>