Vue でルートナビゲーションガードを使用してルートジャンプを制御する方法-Vue.js-php.cn

Vue でルートナビゲーションガードを使用してルートジャンプを制御する方法

WBOY

リリース： 2023-06-11 10:21:07

オリジナル

2592 人が閲覧しました

Vue では、ルーティングはページ間のジャンプやナビゲーションを制御する非常に重要な部分です。実際の開発では、ログインしているときだけアクセスできるようにする、アクセスには管理者権限が必要など、特定の経路を制御する必要があることがよくあります。現時点では、ルーティングナビゲーションガードを使用してルーティング制御を実装する必要があります。

ルートナビゲーションガードは、ルートジャンプを傍受し、ルートジャンプの前後にいくつかの操作を実行できます。 Vue では、ルーティングナビゲーションガードは通常、グローバルナビゲーションガードとコンポーネント内ナビゲーションガードを使用して実装されます。以下では、これら 2 つの方法をそれぞれ使用する方法を紹介します。

1. グローバルナビゲーションガード

グローバルナビゲーションガードはグローバルルーティングを制御でき、通常は Vue インスタンスに登録されます。グローバルナビゲーションガードには 3 つのフック関数が含まれています:

beforeEach(to, from, next)

この関数はルートがジャンプする前に実行され、3 つのパラメーターを受け取ります。

to: ジャンプしようとしているルーティングオブジェクト
from: 現在ジャンプしているルーティングオブジェクト
next: コールバック関数。ルーティングジャンプの制御

beforeEach 関数でルートを判断し、条件を満たしていればジャンプを続け、条件を満たしていない場合は次のメソッドを使用してインターセプトまたはリダイレクトします。たとえば、ログインするかどうかを決定するには:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !store.state.isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

ログイン後にコピー

afterEach(to, from)

この関数は、ルートがジャンプした後に実行され、2 つのパラメーターを受け取ります。

afterEach 関数では、ルートを処理できます。、アクセス記録の記録など。

router.afterEach((to, from) => {
  // 记录访问记录
})

ログイン後にコピー

この関数は、非同期ルーティングジャンプを処理するために、ルーティング設定でフック関数を定義できます。

例:

{
  path: '/dashboard',
  component: Dashboard,
  beforeEnter: (to, from, next) => {
    if (store.state.isAdmin) {
      next()
    } else {
      next('/login')
    }
  }
}

ログイン後にコピー

グローバルナビゲーションガードを使用する場合、複数のガードが実行される場合は、実行順序を制御するために次のメソッドを使用する必要があることに注意してください。

2. コンポーネント内のナビゲーションガード

コンポーネント内のナビゲーションガードは、beforeRouteEnter と beforeRouteLeave の 2 つの関数を使用してルーティング制御を実装します。

この関数はコンポーネントがインスタンス化される前に実行され、3 つのパラメータを受け取ります:

たとえば、この関数を使用して動的ルートを作成できます:

{
  path: '/user/:id',
  component: User,
  beforeEnter: (to, from, next) => {
    api.getUser(to.params.id)
      .then(user => {
        to.meta.user = user
        next()
      })
      .catch(error => {
        next('/error')
      })
  }
}

ログイン後にコピー

beforeRouteLeave(to, from, next)

to: ジャンプしようとしているルーティングオブジェクト

from: 現在ジャンプしているルーティングオブジェクト
next : ルートジャンプの制御に使用されるコールバック関数
#beforeRouteLeave 関数では、データの保存やユーザーへのプロンプトなど、現在のコンポーネントを処理できます。

たとえば、ページを離れる前にデータを保存するかどうかをユーザーに尋ねることができます:

beforeRouteLeave(to, from, next) {
  if (this.formDirty) {
    if (confirm('您是否要保存数据？')) {
      this.saveData()
      next()
    } else {
      next(false)
    }
  } else {
    next()
  }
}

ログイン後にコピー

コンポーネント内でナビゲーションガードを使用する場合、複数のガードが実行される場合、実行順序を制御するには、次のメソッドを使用する必要があります。

要約すると、ルーティングナビゲーションガードは Vue の非常に重要な部分であり、ルーティングを柔軟に制御するのに役立ちます。実際の開発では、ルーティングの洗練された制御を実現し、ユーザーエクスペリエンスを向上させるために、ビジネスニーズに基づいてルーティングナビゲーションガードの適切な使用方法を選択する必要があります。

以上がVue でルートナビゲーションガードを使用してルートジャンプを制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。