beforeEnter フック関数を使用する (コードが添付されています)

今回は、beforeEnterフック関数の使い方（コード付き）と、beforeEnterフック関数を使う際の注意点をご紹介します（以下は実践例ですので、一緒に見ていきましょう。

）なぜ独自の beforeEnter フック関数を作成する必要があるのでしょうか?

問題のシナリオを見てください。プロジェクトには単語リスト ページがあり、各セルをクリックして単語を入力するかどうかを確認します。詳細ページでは、単語を学習し、その単語が習得したかどうかをマークできます。詳細ページでは、進むボタンと戻るボタンをクリックして他の単語を学習することもできるので、戻るをクリックすると、単語リストに最新の単語が表示されます。ユーザーが習得したすべての単語のステータス。最終的なページの関係は次のようになります:

wordListPage ——> wordDetail (一連の単語を学習、終了) ——> wordListPage (単語リストを更新) 上記についてこのシナリオでは、Vue のライフ サイクル関数を使用することはできません。Vue のライフ サイクル関数には、 beforeCreate、created、beforeMounted、mounted などがあります。これらの関数は、コンポーネントが初期化されるときにのみ呼び出されますが、コンポーネント (VM インスタンス) ) がキャッシュ ($route.go(-1)、keep-alive など) から取得されると、ライフサイクル関数が呼び出されなくなります。そのため、単語の詳細ページから一覧ページに戻ると、見つかりません。データ更新を開始する適切なタイミングがあるため、上記のシナリオはうまく処理できません

もちろん、上記のシナリオは比較的少ないですが、それでも beforeEnter フック関数の存在が必要です。 beforeEnter フック関数

依存する知識ポイント:

Route: vue-router

Mixin: mixin

1. Central Event Bus

2. 1 を作成します。中央イベントバス

3. 中央イベント バスの場合、簡単に理解すると、パブリック Vue インスタンス (EventBus) を作成し、同じインスタンスを別の場所で使用して EventBus.$ Emit('demo') メッセージをトリガーし、パブリック Vue インスタンスを使用して EventBus をリッスンします。 $on('demo',() => {}) イベントをリッスンしたい場所に、このようなパブリック コンポーネントがあり、さまざまな場所にメッセージを送信し、さまざまな場所でメッセージを監視します。メッセージの送受信を独自に実装するので、これをセントラル イベント バスと呼びます。コードは次のとおりです: EventBus.js

   import Vue from 'vue';
   const EventBus = new Vue();
   export default EventBus;

使い方を見てみましょう

2 . ルーティングフック関数 beforeEach

beforeEach フック関数により、ルートが切り替わったときに、対応するコンポーネントの beforeEnter イベントがトリガーされます。

コードは次のとおりです: router/index.js

import EventBus from '@/libs/EventBus';
router.beforeEach((to, from, next) => {
  //如：EventBus.$emit('homeBeforeEnter');
  EventBus.$emit(to.name + 'BeforeEnter'); 
  if (to.matched.some(route => route.meta.isAuth)) {
    ...
    next()
  } else {
    next()
  }
  
})

3. グローバル ミックスイン オブジェクトを作成します

ここでは、ルート切り替えイベントの監視とコンポーネント インスタンスのフック関数 beforeEnter のトリガーが実装されています。

libs/beforeEnterMixin.js

import EventBus from './EventBus';
export default {
  beforeCreate() {
    //获取当前路由名称，与前面使用to.name对应
    let vmName = this.$route.name;
    if (!vmName) {
      return;
    }
    // 当组件初始化时，先触发一次，后续将不再调用
    this.$options.beforeEnter();
    const beforeEnter = vmName + 'BeforeEnter';
    //监听路由切换时触发的...BeforeEnter事件
    //通过this.$options获取到实例中的beforeEnter钩子函数
    //监听到...BeforeEnter事件后，触发钩子函数beforeEnter调用
    EventBus.$on(beforeEnter, this.$options.beforeEnter);
  },
  //该函数在这里只作为占位，没有实际意义
  beforeEnter() {}
};

このミックスインオブジェクトでは、グローバルまたはローカルミックスインを使用することが可能です。

グローバルミキシング: main.js

import beforeEnterMixin from '@/libs/beforeEnterMixin';
Vue.mixin(beforeEnterMixin);

4. home.vue

<template>
  <p>
    首页
  </p>
</template>
<script>
export default {
  beforeEnter() {
    console.log('首页 beforeEnter...');
  },
  created() {
    console.log('首页 created...')
  }
}
</script>

などのコンポーネントで使用します。 この時点で、beforeEnter が完成しました。現時点では、デモを作成して自分でテストできます。 I am 多くのプロジェクトがある場所で使用されます。

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

推奨読書:

vue+webpackを使用して非同期読み込みを行う方法

vueルーターの動的ルーティング操作のサブルーティング

以上がbeforeEnter フック関数を使用する (コードが添付されています)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。