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');
});
};
# まとめ
気になった点、記載の誤りなどを見かけましたら、ご指摘いただけますと助かります。
閲覧いただき、ありがとうございました。