JavaScript
Vue.js
nuxt.js
ページ遷移
nuxt2

NuxtのSPAでページ遷移のたびにページのタイトルを取得する


やりたかったこと

ポートフォリオを鋭意製作中で、レビューをもらうために公開してるので見てほしいんですが、見て分かる通りこのサイトは複数のページを上部のボタンによって遷移するようにしています、今回やりたかったのは見ているページによってヘッダーの状態を変えるということです。

ポートフォリオ


やったこと

人に教えてもらったところ、どうやら現在のページの状態は

$nuxt.route.name

なのでまず単純に


layouts/default.vue

<script>

export default {
data () {
return {
pageTitle: $nuxt.$route.name
}
}
}
</script>

みたいにしてみました、すると読み込んだ最初のページタイトルは取得できましたが、遷移してもそのままの状態になってしまいました。

これはSPAなので、layoutの要素はページ遷移しても更新されないからです。

なのでページ遷移の際に毎回 pageTitle を更新するように watch を起きます。

これでページ遷移のたびに要素の更新を監視してLayoutに渡すことができます。


layouts/default.vue

<script>

export default {
watch: {
'$route': function(to, from) {
//遷移元と遷移先のパスが違った場合に発火する
if(to.path !== from.path) {
this.pageTitle = $nuxt.$route.name
}
}
},
data () {
return {
pageTitle: $nuxt.$route.name
}
}
}
</script>

これでページ遷移のたびに現在のページの情報をLayoutに伝えることができました。

もしかしたらこれより良いやり方があるかもしれないので、わかる方いればコメント等で教えてくださると幸いです。