Nuxt.jsでページ遷移ごとに共通の処理を実行する方法

NuxtでWebアプリケーションを作っている際、ページを移動するたびに共通の処理を行いたい、ということがあると思います。

• ログイン状態をチェックして未ログインの場合はリダイレクト
• グローバルメニューを閉じる
• 遷移先に応じたstateの変更

などなど。それらの実装方法について共有したいと思います。

手順

Nuxtではルーティングにvuex-routerが用いられています。そのためページ遷移ごとの共通処理はvuex-routerのオプションを用いる形で実装します。ファイル名はなんでもOKですが、pluginsディレクトリ以下にファイルを作成します。

pluginsファイルの追加

plugins/routerOption.js

export default async ({ app }) => {
  app.router.afterEach((to, from) => {
    // ページ遷移ごとに行いたい処理
  });
};

nuxt.config.jsへのプラグインの追加

上で作成したファイルをpluginとしてNuxtに読み込みます。既に他にpluginsを設定している場合は追加する形で記載します。

nuxt.config.js

module.exports = {
  //　省略
  plugins: [{ src: '~/plugins/routerOption.js', ssr: false }]
  //　省略
};

これであとは実装したい機能をぽちぽち書いていけばOKです。

　補足

利用可能なcallbackなどをvuex-routerの公式で参照してみると、欲しい機能を見つけやすいと思います。

storeの情報を使いたい場合

大体の場合はページ遷移時の共通処理にstateを参照したり、actionを実行したいというケースでしょう。
そんなときは単純に引数にstoreを追加すればOKです。
以下はページ遷移のたびにグローバルメニューを閉じるという処理を実装する場合の例です。

plugins/routerOption.js

export default async ({ app, store }) => {
  app.router.afterEach((to, from) => {
    store.dispatch('closeGuide');
  });
};

　まとめ

気になった点、記載の誤りなどを見かけましたら、ご指摘いただけますと助かります。
閲覧いただき、ありがとうございました。