Vue ルーティング フックの使用に関する実践的なチュートリアル

今回は、Vue ルーティング フックの使い方についての実践的なチュートリアルをお届けします。Vue ルーティング フックを使用する際の 注意事項 について、実際のケースを見てみましょう。

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

vue-routerの公式ドキュメントでは、ルーティングフックはナビゲーションガードと訳されています概要の内容は、ポータルから公式Webサイトにアクセスして読むこともできます

。 ルーティングフック

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

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

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

3. 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: 進入しようとしているターゲットルートオブジェクト

from: Route: 現在のナビゲーションが退出しようとしているルート
next: Function: このフックを解決するには、このメソッドを呼び出す必要があります。実行効果は次のメソッドの呼び出しパラメータによって異なります

注: グローバル ルーティング フックを使用する場合は、必ず next() を呼び出してください!!!

(2).ルート専用ガード(ルート内フック)

beforeEnter ガードをルート設定で直接定義できます:

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

これらのガードのメソッド パラメーターは、グローバル フロント ガードと同じです。

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

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

1. beforeRouteEnter

beforeRouteUpdate (2.2 の新機能)
beforeRouteLeave

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. 実際の開発におけるルーティングフックの適用シナリオ

実際の開発プロセスではルーティングフックはほとんど使用されません。使用シナリオは次のとおりです。

(1) 現在のコンポーネントの

timer

をクリアします コンポーネントにタイマーがある場合、ルートが切り替わったときに、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 または

Session に保存します

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

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

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、他の関連記事に注目してください。 PHP中国語ウェブサイトで！

推奨読書:

WeChat アプレットでサーバーに写真をアップロードする方法

JS でナビゲーション バーの透明なグラデーションを実現する方法

以上がVue ルーティング フックの使用に関する実践的なチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。