Vue が beforeEnter フック関数を実装する方法

今回は、Vue が beforeEnter フック関数を実装する方法を説明します。Vue が beforeEnter フック関数を実装する際の 注意事項は何ですか。実際のケースを見てみましょう。

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

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

最終的なページの関係は次のようになります:

wordListPage ——> wordDetail (一連の単語を学習します、

終了) ——> wordListPage (単語リストを更新します)

上記のシナリオでは、次を使用します。 Vue

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

もちろん、上記のシナリオは比較的まれですが、beforeEnter フック関数の存在は依然として必要です。

beforeEnterフック関数を構築します

知識ポイントに依存します:

1. routing: vue-router

2. Mixin: mixin

3. Centラルイベントバス

1.中央イベント バスを作成する

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

コードは次のとおりです: libs/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 サイトの他の関連記事に注目してください。

推奨読書:

状態を更新する親コンポーネントの vuex メソッドに対処する方法子コンポーネントが時間内にレンダリングを更新できない

vue を使用して SMS 検証パフォーマンスの最適化を実現する方法

以上がVue が beforeEnter フック関数を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。