一般社団法人 全国個人事業主支援協会

COLUMN コラム

  • 【Nuxt3】自画面遷移時にuseHeadを更新する方法

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)

 

この記事をシェアする

  • Twitterでシェア
  • Facebookでシェア
  • LINEでシェア