- 在 AppHeader 组件中添加国际化支持,根据路由元数据动态显示标题 - 在主页页面中添加页面元数据,包括布局、标题和国际化标识 - 优化 AppHeader 组件结构,提高可维护性
41 lines
1014 B
Vue
41 lines
1014 B
Vue
<script setup>
|
|
import { useAppFooterRouteNames as routeWhiteList } from '~/config'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
function onBack() {
|
|
if (window.history.state.back)
|
|
history.back()
|
|
else
|
|
router.replace('/')
|
|
}
|
|
|
|
const { t } = useI18n()
|
|
|
|
const title = computed(() => {
|
|
if (!route.meta)
|
|
return ''
|
|
return route.meta.i18n ? t(route.meta.i18n) : (route.meta.title || '')
|
|
})
|
|
|
|
const showLeftArrow = computed(() => route.name && routeWhiteList.includes(route.name))
|
|
</script>
|
|
|
|
<template>
|
|
<VanNavBar
|
|
:title="title"
|
|
:left-arrow="!showLeftArrow"
|
|
placeholder clickable fixed
|
|
@click-left="onBack"
|
|
>
|
|
<template #title v-if="route.meta.i18n==='menu.home'">
|
|
|
|
<div class="flex flex-col items-center justify-center">
|
|
<div class="text-#000000 text-17px mb-5px font-600">京都拍卖会</div>
|
|
<div class="text-#939393 text-10px line-height-none font-100">2025.01.18 蒙娜丽莎的微笑</div>
|
|
</div>
|
|
</template>
|
|
</VanNavBar>
|
|
</template>
|