Vue Router のナビゲーションガードとは？beforeRouteEnter, beforeRouteLeave などの使い方

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、Vue Router のナビゲーションガードの使い方について、まとめて解説していきます。

1 Vue Router のナビゲーションガードの使い方まとめ
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 参考・引用
5 Twitterやってます！Follow Me！
6 最近の投稿

Vue Router のナビゲーションガードの使い方まとめ

実務で、大規模なアプリを Vue・Nuxtで作成していますが、

Vue Router の機能の1つであるナビゲーションガードを活用することが多いので、まとめておきます。

Vue Router のナビゲーションガードとは？

Vueのナビゲーションガード（Navigation Guard）は、Vue Routerで提供される機能の 1つです。

ナビゲーションガードは、Vue Routerによって、Route の遷移が発生する前や後などに特定の処理を実行するために使用されます。

特に使用されるケースは、認証を Checkしての処理や、リダイレクト、キャンセルによって遷移をガードするなどの使用方法があります。

ナビゲーションガード( Navigation Guard )の種類

ナビゲーションガード( Navigation Guard )には、次の3種類があります。

グローバル・ガード： router.beforeEach を使ってグローバル・ガードを登録できます。
- ルート遷移が始まる前のbeforeEach、ルート遷移が完了した後のafterEachがあります。
ルート単位ガード：直接ルート設定オブジェクトの beforeEnter ガードを定義することができます。
- ルーター設定の際に、合わせて、ガードを登録することができます。
- ルート遷移が始まる前のbeforeEach、ルート遷移が完了した後のafterEachがあります。
コンポーネント内ガード：ルートコンポーネント(ルータ設定に渡されるもの)の内側でルートナビゲーションガードを直接定義することができます。
- beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave の3つがあります。

それぞれの詳しい説明は、こちら (Vue_Router_ナビゲーションガード) がわかりやすいです。

3つの Component Nav Guard

今回紹介する Vue Router のナビゲーションガードは、Component 内の 3種類の Guardについてになります。

つまり、beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave の3つです。

Vueでは、上記の 3つの Functionを利用することで、Component の Route に入る前 (Renderingに入る前) や、

Component の Route の更新後、Routing移動で Componentから抜ける前などのタイミングに、

任意の処理を実行するように設定することができます。

beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave の3つをまとめると次のとおり。

それぞれの解説は、この後します。

// コンポーネント描画の Route に入る前や、更新前、抜ける前に呼び出される関数を定義できます。
const SampleComponent = {
  template: `<h2>SampleComponent</h2>`,
  data() {
    return {
      currentStep: 1,
    }
  },
  // Component の Route に入る前に処理をする
  beforeRouteEnter(to, from, next) {
    console.log("[ENTER] To: " + to.path, +" From: " + from.path)
    next()
  },
  // Component の Route が更新された際に処理をする
  beforeRouteUpdate(to, from, next) {
    console.log("[UPDATE] To: " + to.path, +" From: " + from.path)
    next()
  },
  // Component の Route から抜ける前に処理をする
  beforeRouteLeave(to, from, next) {
    console.log("[LEAVE] To: " + to.path, +" From: " + from.path)
    next()
  },
};

beforeRouteEnter で Component の Route に入る前に処理をする

beforeRouteEnterは、ナビゲーション確立前のコンポーネントのインスタンスが作成される前に呼び出されます。

もっと、簡単に言えば、Routingによって、このページに移動して入る前( Component Rendring 前 )に呼び出される処理ということです。

そのため、 thisに直接アクセスすることができない点に注意する必要があります。

これに対する解決は、nextに関数を渡して作成後のインスタンスを受け取って処理をすることでできます。

ちなみに、next にfalseを渡すと、ナビゲーションの取り消しをすることができます。

  // Routingによって、このページに、移動して入る際の処理 => Component_Rendring前
  beforeRouteEnter(to, from, next) {
    console.log('beforeRouteEnter_Call')
    console.log('to_どこに行く？', to)
    console.log('from_どこから？', from)

    // 1. beforeRouteEnter は Componentの Instance が作成される前に呼び出されます。
    // => this に直接アクセスすることができない点に注意する必要があります。
    // => next に関数を渡して作成後のインスタンスを受け取って処理をすることでできます。
    next((vm) => {
      // 2. vm (Componentの Instance)に、プロパティとして、渡したいデータをSetする
      vm.prevRoute = from.path
    })
    // ナビゲーションの取り消しをする
    // next(false)
  },

beforeRouteLeave で Component の Route から抜ける前に処理をする

beforeRouteLeaveは、で Component の Route から抜ける前に処理をするNav Guardです。

このときは、まだコンポーネントのインスタンスが存在しているため、 this を使うことができます。

  // beforeRouteLeave で Component の Route から抜ける前に処理をする
  beforeRouteLeave(to, from, next) {
    console.log('beforeRouteLeave_Call')
    console.log('to_どこに行く？', to)
    console.log('from_どこから？', from)
    // 次の Routeに移動する
    next()
    // ナビゲーションの取り消しをする
    // next(false)
  },

beforeRouteUpdate で Component の Route が更新された際に処理をする

beforeRouteUpdateは、コンポーネントの再利用を行う際など( Routeの更新タイミング )に実行されます。

これは、先述の 2つの Component Nav Guard とは、違い。

例えばuser/hoge/からuser/fugaに切り替える時には、コンポーネントはそのまま再利用され、

Pathの一部だけ切り替えられます。

このような場合には、beforeRoutEnterはCallされません。

このようなコンポーネントの再利用による Path切り替えや、クエリパラメーターを切り替えた際に、

何か処理をしたい場合はbeforeRouteUpdate を設定することで対応ができます。

beforeRouteUpdateフックを使用することで、ルートが更新される直前に、コンポーネントで特定の処理を実行できます。

これにより、新しいルートパラメータやクエリパラメータに基づいてデータを再取得したり、コンポーネントの状態をリセットしたりすることができます。

  // beforeRouteUpdate で Component の Route が更新された際に処理をする
  beforeRouteUpdate(to, from, next) {
    // 1. beforeRouteUpdate は、同一コンポーネントのナビゲーションで呼ばれます。
    // 2. Component を再利用される際にはこちらを使う必要がある点には注意が必要です。
    // 3. インスタンスは生成済みのため、 this が利用できます。
    // 4. フックの実行を継続するために必ずnext()を呼び出す
    next()
  },