NuxtPage 中的道具

Question

美好的一天，我创建了一个页面，该页面应该根据调用的位置更改标题，我有一个问题，我需要将标题作为页面道具传递，我尝试使用 $router.push({ path: '', params: { titlePage: 'Value' } }) 和选项参数，但在页面中我看不到这个道具，如何将此值作为道具发送到页面。或者我需要创建一个独立的页面？我是 nuxt 和 vue 的新手。

谢谢

我在互联网上阅读了一些选项，其中之一是将值作为路由器参数发送

Answer 1

您不需要将

props

传递到页面，当您需要将数据获取到页面时，您可以使用

useFetch

或

useAsyncdata

等可组合项。

但是对于这个问题，您可以使用

useHead

设置页面标题：

/pages/testTitle1.vue

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script setup>
  const title = ref('Your title for page 1')

  useHead({
    title
  })
</script>

/pages/testTitle2.vue

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script setup>
  const title = ref('Your title for page 2')

  useHead({
    title
  })
</script>

如果您需要有关

useHead

可组合项的更多信息，请查看此文档：https://nuxt.com/docs/api/composables/use-head