ナビゲーションガード

この名前が示すように、 vue-router によって提供されるナビゲーションガードは、リダイレクトもしくはキャンセルによって遷移をガードするために主に使用されます。ルートナビゲーション処理 (グローバル、ルート単位、コンポーネント内) をフックする多くの方法があります。

グローバルガード

router.beforeEach を使ってグローバル before ガードを登録できます。

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

いつナビゲーションがトリガーされようとも、グローバル before ガードは作られた順番で呼び出されます。ガードは非同期に解決されるかもしれません。そしてそのナビゲーションは全てのフックが解決されるまで 未解決状態 として扱われます。

全てのガード関数は 3 つの引数を受け取ります。

  • to: Route: 次にナビゲーションされる対象の ルートオブジェクト

  • from: Route: ナビゲーションされる前の現在のルートです。

  • next: Function: フックを 解決 するためにこの関数を呼ぶ必要があります。この振る舞いは next に渡される引数に依存します:

    • next(): パイプラインの次のフックに移動します。もしフックが残っていない場合は、このナビゲーションは 確立 されます。

    • next(false): 現在のナビゲーションを中止します。もしブラウザのURLが変化した場合は(ユーザーが手動で変更した場合でも、戻るボタンの場合でも)、 from ルートのURLにリセットされます。

    • next('/') or next({ path: '/' }): 異なる場所へリダイレクトします。現在のナビゲーションは中止され、あたらしいナビゲーションが始まります。

グローバル after フックを登録することもできます。しかしながら、ガードとは異なり、これらのフックは next 関数を受け取らず、ナビゲーションに影響しません。

router.afterEach((to, from) => {
  // ...
})

ルート単位ガード

直接ルート設定オブジェクトの beforeEnter ガードを定義することができます。

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

これらのガードはグローバル before ガードと全く同じシグネチャを持ちます。

コンポーネント内ガード

最後に、 beforeRouteEnterbeforeRouteLeave を使ってルートコンポーネント内側でルートナビゲーションガードを直接定義することができます。

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // このコンポーネントをレンダリングするルートが確立する前に呼ばれます。
    // `this` でのこのコンポーネントへのアクセスはできません。
    // なぜならばこのガードが呼び出される時にまだ作られていないからです!
  },
  beforeRouteLeave (to, from, next) {
    // このコンポーネントをレンダリングするルートが間もなく
    // ナビゲーションから離れていく時に呼ばれます。
    // `this` でのコンポーネントインスタンスへのアクセスができます。
  }
}

この beforeRouteEnter ガードは this へのアクセスはできないです。なぜならば、ナビゲーションが確立する前にガードが呼び出されるからです。したがって、新しく入ってくるコンポーネントはまだ作られていないです。

しかしながら、 next にコールバックを渡すことでインスタンスにアクセスすることができます。このコールバックはナビゲーションが確立した時に呼ばれ、コンポーネントインスタンスはそのコールバックの引数として渡されます。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // `vm` を通じてコンポーネントインスタンスにアクセス
  })
}

beforeRouteLeave 内で直接 this にアクセスすることができます。この去る際のガードは通常はユーザーが不意に編集を保存していない状態でこのルートを去ることを防ぐために使われます。このナビゲーションは next(false) を呼ぶことでキャンセルされます。

results matching ""

    No results matching ""