如何在Nuxt 3中获取页面标题？

Question

我正在努力寻找一种在 Nuxt 3 中获取页面标题并在布局中重用它的方法。我很确定有一种方法可以通过一些元对象来做到这一点，但我就是找不到它。

我尝试通过路由元来做到这一点

/layouts/default.vue

<template>
    <h1>
        {{ route.meta.title }}
    </h1>
</template>

<script setup>
    const route = useRoute();
</script>

但是现在当我必须设置标题时，我需要执行两次，这样这个方法才有效

/pages/catalog.vue

<script setup>
    definePageMeta({
        title: 'Catalog Page',
    });

    useHead({
        title: 'Catalog Page',
    });
</script>

看起来真的很老套，所以我在这里接受想法

Answer 1

useHead()

允许您编辑站点/页面标题 - https://nuxt.com/docs/api/composables/use-head

<script setup>
useHead({
  title: "My custom page title"
})
</script>

它也可以是动态的、甚至无功的值。

只是不确定“得到”它是什么意思？

例如在我的 Nuxt 演示项目中，我在

app.config.ts

file:

中定义了页面标题

export default defineAppConfig({
  textTitle: 'Nuxt Demos - Nuxt Stack'
})

然后我通过

useHead

中的

app.vue

引用它：

useHead({
  title: useAppConfig().textTitle
})

这对你有帮助吗？

Answer 2

如果您想获取当前标题并以某种方式重新设计它，您可以随时使用

document.title

只要不是服务器端渲染的

Answer 3

我在我的组件上使用 i18n，我做了下面的代码，它对我有用

{{ $t(`${$route.meta.title}`) }}