Vue ドキュメントのルート ガード関数の概要

Vue は、多くの強力な機能を提供する人気のフロントエンド フレームワークであり、その 1 つがルート ガード機能です。ルート ガード機能は Vue ルーティングの重要な機能であり、ルートに移動するとき、またはルートから離れるときに制御ロジックを実行するために使用されます。ルートガード機能により、ルートの読み取りや変更、さまざまな条件に応じたルートナビゲーションを制御できます。この記事では、Vue のルート ガード機能の役割と使用法を理解するのに役立つように、Vue ドキュメントのルート ガード機能を紹介します。

ルート ガード機能は、グローバル フロント ガード、グローバル ポスト フック、およびルート専用ガードの 3 つのカテゴリに分類できます。以下では、これら 3 種類のガードをそれぞれ紹介します。

グローバル プレガード:

グローバル プレガードは、ルート ジャンプの前に実行できます。 Vue ルーター オブジェクトにグローバル プレフィックス ガードを登録して、プロジェクト全体のすべてのルートに有効にすることができます。以下に示すように、beforeEach メソッドを使用して Vue ルーター オブジェクトにグローバル beforeEach ガードを登録します。

router.beforeEach((to, from, next) => {
  // to: 即将进入的目标路由对象
  // from: 当前导航正要离开的路由对象
  // next: 下一步执行钩子函数，如果全部执行完了，则返回空或一个true值
})

最も簡単な使用法は、next() メソッドを呼び出してアウトバウンド操作を開始することです。ナビゲーションをキャンセルしたい場合 (たとえば、ユーザーにアクセス権限がない場合)、 false または文字列または Error インスタンスを返します。これにより、ナビゲーションが終了し、対応するルートに直接切り替わります。たとえば、次のガードは、ユーザーがログインしていない場合にナビゲーションを終了します。

router.beforeEach((to, from, next) => {
  const isAuthenticated = store.getters.isAuth
  if (!isAuthenticated && to.path !== '/login') {
    next('/login')
  } else {
    next()
  }
})

グローバル ポストフック:

グローバル ポストフックは、ナビゲーションが確認された後に実行されます。このガードは次の機能を受け入れず、ナビゲーション自体を変更しません:

router.afterEach((to, from) => {
  // to: 要进入的目标路由
  // from: 正在离开的路由
})

ルート限定ガード:

ルート限定ガードはルート設定で設定できます。つまり、次のことが可能です。異なるフロント ガードとバック ガードを定義して、異なるルートを処理します。 beforeEnter ガードを使用すると、特定のルートに排他的なガード機能を設定できます (グローバル ガードとは異なり、Router オブジェクトにガードを登録する必要はありません)。 beforeEnter ガードは、ルート排他的設定に存在する場合にのみ起動します。

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

ルート排他的ガードで実行されるロジックは、グローバル フロント ガード機能のロジックと非常によく似ていますが、フロント ガードではすべてのルートに対して同じロジックを実行できますが、ルート排他的ガードでは、ルートは特定のロジックを定義します。

概要:

ルート ガード機能は Vue ルーティングの重要な部分であり、ルート ナビゲーションを制御する機能を提供します。グローバル フロント ガード、グローバル ポスト フック、およびルート専用ガードは 3 つの異なるガード タイプであり、それぞれに異なる目的と特性があります。 Vue ルーティングを使用する場合、これらのさまざまな種類のガードをより深く理解して使用すると、ルート ナビゲーションをより適切に制御し、より柔軟なフロントエンド アプリケーションを開発するのに役立ちます。

以上がVue ドキュメントのルート ガード関数の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。