<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> :root:root { --van-dialog-radius: 8px } .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>