Vue+beforeEnter はフック関数を使用します

今回は Vue+beforeEnter のフック関数についてご紹介します。 Vue+beforeEnter のフック関数を使用する際の 注意事項 について、実際のケースを見てみましょう。

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

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

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

wordListPage ——> wordDetail (一連の単語を学習、終了) ——> wordListPage (単語リストを更新)

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

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

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

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

依存関係のナレッジポイント:

1. Route: vue-router

2. Mixin: mixin

3. Central

   Event バス

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

推奨読書:

vueでのタブと切り替え機能の実装方法の詳細な説明

vueでの$refsの使用の詳細な説明

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