Vue.js vue-router Nuxt.js の各フック (など) がいつ実行されるかメモ

続編のようなものを書きました。 ryotah.hatenablog.com

---

GitHub - ryotah/vue-vue-router-nuxt-hooks

ログに表示される内容:

• [INFO] vue: [page] / [hook]
  • Vue.js のライフサイクルフック
  • created, beforeUpdate, destroyed, etc.
• [INFO] vue-router: [page] / [guard]
  • vue-router のナビゲーションガード
  • beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave
• [INFO] nuxt: [page] / [method]
  • Nuxt.js の asyncData, fetch

確認できること:

• 以下の遷移
  • /hooks/parents/1
  • /hooks/parents/2
  • /hooks/parents/1/child
  • /hooks/parents/2/child
  • /hooks/parents/2/child?q=query
• リダイレクトや遷移失敗 (abort) 時の処理
• asyncData / fetch でページ (state) を初期化、beforeRouteLeave でページ (state) をリセットした場合の問題点の把握
  • 今回のモチベーションはこれ