這次帶給大家Vue beforeEnter使用鉤子函數，Vue beforeEnter使用鉤子函數的注意事項有哪些，下面就是實戰案例，一起來看一下。
為什麼要自造beforeEnter鉤子函數？
看下問題場景：項目中有一個單字清單頁面，每個cell都會備註單字是否已經掌握，點擊cell進入詳情頁，可對該單字進行學習，並標記單字是否掌握，並且在詳情頁面中也可以點擊前進後退按鈕學習其他的單字。所以但我點擊返回時，單字清單要顯示所有單字使用者掌握的最新情況。
最終的頁面關係是這樣的：
wordListPage ——> wordDetail （對一系列單字進行學習，退出）——> wordListPage（刷新單字列表）
對於上面的場景，使用Vue生命週期函數是不行的，因為Vue的生命週期函數如：beforeCreate 、created、beforeMounted、mounted等，只有在組件初始化的時候才會被調用，但是當元件（VM實例）來自於快取（如$route.go(-1) 、keep-alive）中時，生命週期函數將不會再被調用。因此，當我從單字詳情頁面回到列表頁面時，找不到一個恰當的時期去出發資料更新。所以上面的場景也就無法很好的去做處理。
當然，對於上面的場景是比較少的，但是beforeEnter鉤子函數的存在還是有必要的。
建構beforeEnter鉤子函數
#依賴知識點：
路由：vue-router
混入：mixin
#中央事件匯流排
# 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 就完成了，可以做個demo自己測試下，目前本人在項目比較多的地方都會用到它。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是Vue+beforeEnter使用鉤子函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！
