這次帶給大家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
## 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的觸發。
全域混入:main.jsimport beforeEnterMixin from '@/libs/beforeEnterMixin'; Vue.mixin(beforeEnterMixin);4.在元件中的使用
<template> <p> 首页 </p> </template> <script> export default { beforeEnter() { console.log('首页 beforeEnter...'); }, created() { console.log('首页 created...') } } </script>###至此,我們的beforeEnter 就完成了,可以做個demo自己測試下,目前本人在專案比較多的地方都會用到它。 ######相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! ######推薦閱讀:#########如何處理父元件中vuex方法更新state子元件不能及時更新渲染###############如何使用vue實作簡訊驗證效能最佳化##########
以上是Vue怎麼實作beforeEnter鉤子函數的詳細內容。更多資訊請關注PHP中文網其他相關文章!