[Vue.js]ビュールータ(Vue Router)-ナビゲーションガード(Navigation Guards)

ナビゲーション保護

名前の通り、vue-routerが提供するナビゲーション保護は、主にナビゲーションを保護するためにリダイレクトまたはキャンセルするために使用されます.ルーティング・ナビゲーション・プロセスに接続する方法には、グローバル、ルーティング、またはコンポーネントが含まれます.
As the name suggests, the navigation guards provided by vue-router are primarily used to guard navigations either by redirecting it or canceling it. There are a number of ways to hook into the route navigation process: globally, per-route, or in-component.
💡 特定のurlにアクセスする際に最も一般的な方法は、情報が存在するかどうかを検証することです.

Global Before Guard - beforeEnter()

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

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

to: route移動するルーティング情報

from: route移動前現在位置のルーティング情報

next: functionnext()関数を呼び出す必要があります

next()

next()関数はhookを解決するために呼び出される必要があります.
動作はパラメータ値によって変わります.

next()フックがない場合は、パイプラインの次のフックに移動します.

next(false)現在のナビゲーションを停止します.ブラウザのURLが変更された場合(ユーザーまたは戻るボタンで手動で変更)、パスのURLにリセットされます.

next('/') or next({ path: '/' })他の場所にリダイレクトします.現在のナビゲーションが停止し、新しいナビゲーションが開始します.

next(error)nextで渡されたパラメータがErrorインスタンスの場合、ナビゲーションが停止し、routerが使用されます.エラーは、onError()を使用して登録されたコールバックに渡されます.

Per-Route Guard - beforeEnter()

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

In-Component Guards

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // called before the route that renders this component is confirmed.
    // does NOT have access to `this` component instance,
    // because it has not been created yet when this guard is called!
  },
  beforeRouteUpdate(to, from, next) {
    // called when the route that renders this component has changed.
    // This component being reused (by using an explicit `key`) in the new route or not doesn't change anything.
    // For example, for a route with dynamic params `/foo/:id`, when we
    // navigate between `/foo/1` and `/foo/2`, the same `Foo` component instance
    // will be reused (unless you provided a `key` to `<router-view>`), and this hook will be called when that happens.
    // has access to `this` component instance.
  },
  beforeRouteLeave(to, from, next) {
    // called when the route that renders this component is about to
    // be navigated away from.
    // has access to `this` component instance.
  }
}

出典:Navigation Guards | Vue Router