Nuxt.jsでパス名を共通化する方法

公開:2020/10/22
更新:2020/11/03
1 min読了の目安(約900字TECH技術記事

nuxt.jsでページ名を取得する時、皆さんはどうしているでしょうか。
もし多くのページで使用するものならば、いちいち処理を書いてしまうと、変更の際が大変...!!!``

ではどうすれば共通化して簡単に使用できるのでしょうか?
その方法の一例をご紹介します。

injectを使用する

僕はinjectを使用してVueインスタンスに登録する方法をとります。

例えばこんな感じでplugins配下にjsを作ってやります。

check-page-name.js
export default ({ route }, inject) => {
  const path = route.path
  inject('checkPageName', () => path.split('/')[1])
}

{ route }はVueコンテキストです。Nuxtからコンポーネントへ追加のオブジェクトを提供し、利用できるというもの

injectでは、第一引数にdeterminePathNameという名前を登録します。(名前は何でも大丈夫)
第二引数に、得られたパスからページ名を取り出して返す関数を作成しました。

nuxt.config.jsのpluginsに登録

nuxt.config.js
plugins: ['~/plugins/check-page-name']

各コンポーネントで使用

// thisはVueインスタンスを示しています。
// アロー関数だとthisを束縛してしまうのでundefinedになります。
this.$checkPageName()

で呼び出し可能です。

共通化して何がいいのか

  • 処理をいちいち書かなくて済む。
  • 該当jsを修正するだけで変更が反映される。
  • VuexのAction中でも使用可能。

感想

共通できそうな部分があれば、切り出す検討をしたら良いかなと思います。
後々、あの時に、、、なんてことにならないようにしていきたいですね。