Vue ドキュメントのルートガード関数の概要-Vue.js-php.cn

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

WBOY

リリース： 2023-06-20 08:18:22

オリジナル

1096 人が閲覧しました

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 サイトの他の関連記事を参照してください。