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に伝えることができました。

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