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

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

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

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

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

1. 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()
  }
})

2. afterEach(to, from)

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

##to: ジャンプしたばかりのルーティング オブジェクト
• from: 出発したばかりのルーティング オブジェクト

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

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

resolve(to, from, next)

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

例:

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

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

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

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

beforeRouteEnter(to, from, next)

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

to: ジャンプしようとしているルーティング オブジェクト
• from: 現在ジャンプしているルーティング オブジェクト
• next: ルーティング ジャンプの制御に使用されるコールバック関数
• # in beforeRouteEnter 関数では、コンポーネントがインスタンス化されていないため、this オブジェクトに直接アクセスできません。そのため、next メソッドを使用して、コンポーネントがインスタンス化された後に実行されるコールバック関数を渡す必要があります。

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

{
  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)

2. この関数は次のとおりです。コンポーネントが終了する前に実行されると、コンポーネントは 3 つのパラメータを受け取ります:

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