Nuxt.js ページ遷移時の処理

ページ遷移時のタイミングで処理をしたい

pluginでページ遷移時の処理を書き、nuxt.config.jsで読み込む方法がある。
例. plugins/routerOption.js

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

     let page_name;
     page_name = to.name;

     switch(page_name){
       case "privacy" :
         console.log("privacy page");
         store.dispatch("changeTestState", true);
         break;
       
       case "agreement" :
         console.log("agreement page。");
         store.dispatch("changeTestState", true);
         break;

       case "index" :
         console.log("index page。");
         store.dispatch("changeTestState", false);
         break;
     }
   });
 };

switch文でページごとに処理を分けることも可能。
storeを呼び出してdispatchも可能。
ページ切り替え時のアニメーションなどに使えたり用途はありそう。

この記事が気に入ったらサポートをしてみませんか?