이번에는 beforeEnter 후크 기능(코드 포함) 사용법과 beforeEnter 후크 기능 사용 시 주의사항에 대해 소개하겠습니다. (다음은 실제 사례인데 한번 살펴보겠습니다.
왜 당신이 하는가? beforeEnter 후크 기능을 직접 만들어야 합니까?
문제 시나리오를 살펴보세요. 프로젝트에 단어 목록 페이지가 있습니다. 각 셀은 해당 단어가 마스터되었는지 여부를 표시합니다. 단어를 학습하고 해당 단어가 마스터되었는지 표시할 수 있으며, 세부정보 페이지에서 앞으로 및 뒤로 버튼을 클릭하여 다른 단어도 학습할 수 있으므로 뒤로를 클릭하면 단어 목록에 모든 단어의 최신 상태가 표시됩니다. 사용자가 마스터한 최종 페이지 관계는 다음과 같습니다.
wordListPage ——> wordDetail(일련의 단어 학습, 종료) ——> wordListPage(단어 목록 새로 고침)
위 시나리오에서는 Vue 수명주기 함수를 사용할 수 없습니다. 왜냐하면 Vue의 수명주기 함수는 beforeCreate, 생성됨, beforeMounted, 마운트 등과 같기 때문입니다. 이는 구성 요소가 초기화될 때만 호출되지만 구성 요소(VM 인스턴스)가 다음에서 나올 때 호출됩니다. 캐시(예: $route.go(-1), keep-alive), 수명주기 함수가 더 이상 호출되지 않으므로 단어 세부정보 페이지에서 목록 페이지로 돌아갈 때 적절한 시간을 찾을 수 없습니다. 물론 위의 경우에는 상대적으로 적은 수의 시나리오가 있지만 여전히 beforeEnter 후크가 필요합니다. function 종속 지식 포인트:Route: vue-router
Mixin: mixinimport Vue from 'vue'; const EventBus = new Vue(); export default EventBus;
beforeEach Hook 함수를 통해 경로 전환 시 해당 컴포넌트의 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() } })
여기서 Enter 이전에 경로 전환 이벤트 모니터링 및 구성 요소 인스턴스 후크 기능 트리거가 구현됩니다.
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.jsimport beforeEnterMixin from '@/libs/beforeEnterMixin';
Vue.mixin(beforeEnterMixin);
에서 사용: home.vue
<template> <p> 首页 </p> </template> <script> export default { beforeEnter() { console.log('首页 beforeEnter...'); }, created() { console.log('首页 created...') } } </script>
이 시점에서 beforeEnter를 직접 테스트할 수 있습니다. 저는 프로젝트가 많은 곳이라면 어디든 사용하게 될 것입니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
vue+webpack을 사용하여 비동기 로딩을 만드는 방법vue 라우터 동적 라우팅 작업 하위 라우팅
위 내용은 beforeEnter 후크 기능 사용(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!