router.pushやrouter.replaceで同じ画面に遷移した場合、titleやheaderの情報が更新されないことが分かりました。
結論から言うと、公式のページを読めば解決できます。
useHeadに渡す値をrefやcomputedの値にすればOKです。
https://nuxt.com/docs/api/composables/use-head
const thisPath = useRuntimeConfig().public.url + useRoute().path
const staticUrl = useRuntimeConfig().public.staticUrl
const metaObject = computed((): MetaObject => {
const name = aaaa // ここに画面遷移で変更される値を指定する。
const image = bbbb // ここに画面遷移で変更される値を指定する。
return {
title: `${name}のタイトル`,
meta: [
{ property: ‘og:type’, content: ‘article’ },
{ property: ‘og:title’, content: `${name}のタイトル` },
{ property: ‘og:url’, content: thisPath },
{ property: ‘og:site_name’, content: ‘サイト名’ },
{ property: ‘og:description’, content: `${name}の説明` },
{ property: ‘og:image’, content: image }
]
}
})
useHead(metaObject)
The following two tabs change content below.