Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
63
Help us understand the problem. What is going on with this article?
@tobita0000

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

More than 1 year has passed since last update.

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');
  });
};

 まとめ

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

63
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
tobita0000
Golang/TypeScriptをメインで使っているフリーのエンジニアです。Docker/Kubernetesなどもちょこちょこやります。趣味でベースを弾きます。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
63
Help us understand the problem. What is going on with this article?