Vue のナビゲーション ガードとは何ですか?

ナビゲーション ガードには次のものが含まれます: 1. グローバル プレガード "beforeEach"; 2. グローバル解析ガード "beforeResolve"; 3. ルート専用ガード "beforeEnter"; 4. コンポーネント内のガード "beforeRouteEnter"、" beforeRouteLeave」。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

vue-router が提供するナビゲーション ガードは、主にジャンプやキャンセルによるナビゲーションのガードに使用されます。ルート ナビゲーション プロセスを組み込む機会は複数あります。グローバル、単一ルート専用、またはコンポーネント レベルです。

パラメータやクエリを変更しても、開始/終了ナビゲーション ガードはトリガーされないことに注意してください。 $route オブジェクトを監視するか、コンポーネント内ガード beforeRouteUpdate を使用することで、これらの変更に対応できます。

グローバル フロント ガード

router.beforeEach を使用してグローバル フロント ガードを登録できます:

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

ナビゲーションがトリガーされると、グローバル フロント ガードがGuard セットされたガードは、作成された順序で呼び出されます。ガードは非同期で解析および実行されます。この時点で、ナビゲーションはすべてのガードが解決されるまで待機します。

各ガード メソッドは 3 つのパラメータを受け取ります:

• to: Route: 入力されるターゲット ルーティング オブジェクト

• from: Route: 現在のナビゲーションが出発しようとしているルート

• next: 機能: このフックを解決するには、このメソッドを呼び出す必要があります。実行効果は、次のメソッドの呼び出しパラメータによって異なります。

  • next(): パイプラインの次のフックに進みます。すべてのフックが実行されると、ナビゲーションのステータスが確認されます。

  • next(false): 現在のナビゲーションを中断します。ブラウザの URL が変更されると (おそらくユーザーが手動で、またはブラウザの [戻る] ボタンによって)、URL アドレスは from ルートに対応するアドレスにリセットされます。

  • next('/') または next({ path: '/' }): 別のアドレスにジャンプします。現在のナビゲーションが中断され、新しいナビゲーションが開始されます。任意の場所オブジェクトを next に渡すことができ、replace: true、name: 'home' などのオプション、および prop または router.push へのルーターリンクで使用されるオプションを設定することができます。

  • next(error): (2.4.0) next に渡されたパラメータが Error インスタンスの場合、ナビゲーションは終了し、エラーは router.onError() に渡されます。登録されたコールバック。

# 次の関数が特定のナビゲーション ガード内で 1 回だけ呼び出されることを確認します。これは複数回出現できますが、すべての論理パスが重複していない場合に限ります。そうでない場合、フックは解析されないか、エラーが報告されます。ユーザーが認証に失敗した場合に /login にリダイレクトする例を次に示します。

// BAD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  // 如果用户未能验证身份，则 `next` 会被调用两次
  next()
})
// GOOD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

Global Resolution Guard

New in 2.5.0

2.5.0 では、router.beforeResolve を使用してグローバル ガードを登録できます。これは、ナビゲーションが確認される前、およびすべてのコンポーネント内ガードと非同期ルート コンポーネントが解析された後に解析ガードが呼び出される点を除いて、router.beforeEach に似ています。

ルーティング専用ガード

ルーティング設定で beforeEnter ガードを直接定義できます:

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

これらのガードとグローバル プレガードのメソッドパラメータは同じです。

コンポーネント内のガード

最後に、次のルート ナビゲーション ガードをルーティング コンポーネント内で直接定義できます:

• beforeRouteEnter

• beforeRouteUpdate (2.2 の新機能)

• beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

beforeRouteEnter ガードはアクセスできませんこれは、ナビゲーションが確認される前にガードが呼び出されるため、これから登場する新しいコンポーネントはまだ作成されていません。

ただし、コールバックを next に渡すことでコンポーネント インスタンスにアクセスできます。ナビゲーションを確認したらコールバックを実行し、コールバックメソッドのパラメータとしてコンポーネントインスタンスを渡します。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

beforeRouteEnter は、next へのコールバックの受け渡しをサポートする唯一のガードであることに注意してください。 beforeRouteUpdate と beforeRouteLeave の場合、これはすでに利用可能であるため、コールバックの受け渡しは必要ないためサポートされていません。

beforeRouteUpdate (to, from, next) {
  // just use `this`
  this.name = to.params.name
  next()
}

この離脱ガードは通常、ユーザーが変更を保存する前に突然離脱することを防ぐために使用されます。このナビゲーションは next(false) でキャンセルできます。

beforeRouteLeave (to, from, next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

ナビゲーション解析プロセスを完了

• ナビゲーションがトリガーされます。

• 非アクティブ化されたコンポーネントで beforeRouteLeave ガードを呼び出します。

• 各ガードの前にグローバルを呼び出します。

• 再利用されたコンポーネントで beforeRouteUpdate ガード (2.2) を呼び出します。

• ルーティング設定に入る前に呼び出します。

• 非同期ルーティング コンポーネントを解決します。

• アクティブ化されたコンポーネントのRouteEnterの前に呼び出します。

• グローバル beforeResolve ガード (2.5) を呼び出します。

• #ナビゲーションを確認しました。

• グローバル afterEach フックを呼び出します。

• DOM 更新をトリガーします。

• beforeRouteEnter ガードで next に渡されるコールバック関数を呼び出すと、作成されたコンポーネント インスタンスがコールバック関数のパラメータとして渡されます。

[関連する推奨事項:「vue.js チュートリアル」]

以上がVue のナビゲーション ガードとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。