Vueルーティングフックの例と応用シナリオを詳しく解説

この記事では主にVueのルーティングフックの詳細な説明と応用シナリオ（概要）を紹介していますが、編集者が非常に良い内容だと思ったので、参考として共有させていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

1. ルーティングフックの構文

vue-router の公式ドキュメントでは、ルーティングフックはナビゲーションガードとして翻訳されています。以下は、ポータルから公式 Web サイトにアクセスすることもできます。詳細な内容を読んでください

ルーティングフック

ルーティングフックは主に、ユーザーがルーティング変更時に特別な処理を実行するために定義されています。 。なんて一口でしょう。

一般に、Vue は 3 つの主要なタイプのフックを提供します

1. グローバル フック
2. 特定のルート専用のフック

3 つのルーティング フックのうち 3 つが関係します。ここから公式の紹介に直接アクセスしてください

to: Route: 進入しようとしているターゲットルートオブジェクト

from: Route: 現在のナビゲーションが退出しようとしているルート
next: Function: これを解決するにはこのメソッドを呼び出す必要があります針。実行効果は、次のメソッドの呼び出しパラメータによって異なります。
next(): パイプラインの次のフックに進みます。すべてのフックが実行されると、ナビゲーションのステータスが確認されます。
next(false): 現在のナビゲーションを中断します。ブラウザの URL が変更されると (おそらくユーザーが手動で、またはブラウザの [戻る] ボタンによって)、URL アドレスは from ルートに対応するアドレスにリセットされます。
next(‘/’) または next({ path: ‘/’ }): 別のアドレスにジャンプします。現在のナビゲーションが中断され、新しいナビゲーションが開始されます。

(1). グローバル ガード (グローバル ルーティング フック)

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

const router = new VueRouter({ ... })

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

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

1. to: Route: About toターゲットルートオブジェクト

2. from: Route: 現在のナビゲーションが出発するルート

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

注: グローバル ルーティング フックを使用する場合は、必ず next()!!!

(2) を呼び出してください。

ルーティング フックを使用できます。 before を直接定義します。構成にガードを入力します:

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

これらのガードには、グローバル プレガードと同じメソッド パラメーターがあります。

(3). コンポーネント内のガード (コンポーネント内のフック)

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

beforeRouteEnter
beforeRouteUpdate (2.2 の新機能)
beforeRouteLeave

3. 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`
    }
   }

2. 実際の開発におけるルーティングフックの適用シナリオ

実際の開発プロセスでは、ルートフックはコンポーネント内でのみ使用されます。使用シナリオは次のとおりです。状況は 3 種類あります:

(1) 現在のコンポーネントのタイマーをクリアします

コンポーネントにタイマーがある場合、ルートが切り替わったとき、メモリの占有を避けるために beforeRouteLeave を使用してタイマーをクリアできます:

beforeRouteLeave (to, from, next) {
 window.clearInterval(this.timer) //清楚定时器
 next()
}

(2) ページ上に閉じていないウィンドウや保存されていないコンテンツがある場合、ページがジャンプしないようにします

ページ内にジャンプする前に保存する必要がある重要な情報がある場合、またはポップアップ ボックスがある場合。ユーザーがジャンプするのを防ぐ必要があります

 beforeRouteLeave (to, from, next) {
 //判断是否弹出框的状态和保存信息与否
 if (this.dialogVisibility === true) {
  this.dialogVisibility = false //关闭弹出框
  next(false) //回到当前页面, 阻止页面跳转
 }else if(this.saveMessage === false) {
  alert('请保存信息后退出!') //弹出警告
  next(false) //回到当前页面, 阻止页面跳转
 }else {
  next() //否则允许跳转
 }
}

(3) 関連するコンテンツを Vuex またはセッションに保存します

ユーザーがページを閉じる必要がある場合、公開情報をセッションまたは Vuex に保存できます

 beforeRouteLeave (to, from, next) {
  localStorage.setItem(name, content); //保存到localStorage中
  next()
}

関連する推奨事項:

詳細vue-routerルーティングとページ間ナビゲーションの説明

Vueログインルート検証の実装方法

vueでのルート検証とそれに対応するインターセプトの使い方を詳しく解説

以上がVueルーティングフックの例と応用シナリオを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。