為什么要自造beforeEnter鉤子函數？

為圍場等地區(qū)用戶提供了全套網頁設計制作服務，及圍場網站建設行業(yè)解決方案。主營業(yè)務為成都做網站、網站設計、圍場網站設計，以傳統(tǒng)方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

看下問題場景：項目中有一單詞列表頁面，每個cell都會備注該單詞是否已經掌握，點擊cell進入詳情頁，可對該單詞進行學習，并標記單詞是否掌握，并且在詳情頁面中也可以通過點擊前進 后退 按鈕學習其他的單詞。所以但我點擊返回時，單詞列表要展示所有單詞用戶掌握的最新情況。

最終的頁面關系是這樣的：

​ wordListPage ——> wordDetail （對一系列單詞進行學習，退出）——> wordListPage（刷新單詞列表）

對于上面的場景，使用Vue生命周期函數是不行的，因為Vue的生命周期函數如：beforeCreate 、created、beforeMounted、mounted等，只有在組件初始化的時候才會被調用，但是當組件（VM實例）來自于緩存（如$route.go(-1) 、keep-alive）中時，生命周期函數將不會再被調用。因此，當我從單詞詳情頁面返回至列表頁面時，找不到一個恰當的時期去出發(fā)數據更新。所以上面的場景也就無法很好的去做處理。

當然，對于上面的場景是比較少的，但是beforeEnter鉤子函數的存在還是有必要的。

構造beforeEnter鉤子函數

依賴知識點：

1. 路由：vue-router  
2. 混入：mixin  
3. 中央事件總線
   

1.創(chuàng)建一個中央事件總線

對于中央事件總線，簡單理解，就是創(chuàng)建一個公共Vue實例（EventBus），在不同的地方使用相同實例觸發(fā)EventBus.$emit('demo') 消息，在想要監(jiān)聽事件的位置使用公共Vue實例進行監(jiān)聽EventBus.$on('demo',() => {})。再說白點，就是有這么一個公共組件，它會再不同的地方發(fā)消息，又在不同的地方自己去監(jiān)聽消息。所以說消息的發(fā)送和接收都是它自己實現的，所以說我們稱之為中央事件總線。

代碼如下：libs/EventBus.js

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

下面看下怎么使用

2.路由鉤子函數beforeEach

通過beforeEach鉤子函數，實現路由切換時觸發(fā)相應組件的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.創(chuàng)建全局混入對象

這里實現路由切換事件的監(jiān)聽和組件實例鉤子函數beforeEnter的觸發(fā)。

libs/beforeEnterMixin.js

import EventBus from './EventBus';

export default {
  beforeCreate() {
    //獲取當前路由名稱，與前面使用to.name對應
    let vmName = this.$route.name;
    if (!vmName) {
      return;
    }
    // 當組件初始化時，先觸發(fā)一次，后續(xù)將不再調用
    this.$options.beforeEnter();
    const beforeEnter = vmName + 'BeforeEnter';
    //監(jiān)聽路由切換時觸發(fā)的...BeforeEnter事件
    //通過this.$options獲取到實例中的beforeEnter鉤子函數
    //監(jiān)聽到...BeforeEnter事件后，觸發(fā)鉤子函數beforeEnter調用
    EventBus.$on(beforeEnter, this.$options.beforeEnter);
  },
  //該函數在這里只作為占位，沒有實際意義
  beforeEnter() {}
};

對于該混入對象，使用全局或者局部混入都是可行的。

全局混入：main.js

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

4.在組件中的使用

如：home.vue

至此，我們的 beforeEnter 就完成了，可以做個demo自己測試下，目前本人在項目比較多的地方都會用到它。

在此附上以上代碼的demo鏈接：https://github.com/chaoshenr/Vue-beforeEnter

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯。