이번에는 Vue+beforeEnter의 Hook 기능을 가져오겠습니다. Vue+beforeEnter의 Hook 기능 사용 시 주의사항은 무엇인가요?
왜 우리는 beforeEnter 후크 함수를 직접 만들어야 하나요?
문제 시나리오를 살펴보세요. 프로젝트에 단어 목록 페이지가 있으며 각 셀에는 단어가 마스터되었는지 여부가 표시됩니다. 셀을 클릭하면 단어를 학습하고 여부를 표시할 수 있는 세부 정보 페이지로 들어갑니다. 단어가 마스터 되었으며, 상세 페이지에서 앞으로 가기 버튼과 뒤로 가기 버튼을 눌러 다른 단어도 학습하실 수 있습니다. 따라서 돌아가기를 클릭하면 단어 목록에 모든 단어 사용자의 최신 상태가 표시되어야 합니다.
최종 페이지 관계는 다음과 같습니다.
wordListPage ——> wordDetail(일련의 단어 학습, 종료) ——> wordListPage(단어 목록 새로 고침)
위 시나리오에서는 Vue를 사용하세요 beforeCreate,created,beforeMounted,mounted 등과 같은 Vue의 생명주기 기능은 구성 요소가 초기화될 때만 호출되지만 구성 요소(VM 인스턴스)가 캐시( $route .go(-1), keep-alive 등), 수명주기 함수는 더 이상 호출되지 않습니다. 그래서 단어상세페이지에서 목록페이지로 돌아오면 데이터업데이트를 시작하기에 적합한 기간을 찾을 수 없습니다. 따라서 위의 시나리오는 잘 처리될 수 없습니다.
물론 위의 시나리오는 비교적 드물지만 beforeEnter 후크 기능의 존재는 여전히 필요합니다.beforeEnter 후크 기능 구성
종속성 지식 포인트:Event 버스
1.만들기 중앙 이벤트 버스
중앙 이벤트 버스의 경우, 간단한 이해는 공개 Vue 인스턴스(EventBus)를 생성하고, 다른 장소에서 동일한 인스턴스를 사용하여 EventBus.$emit('demo') 메시지를 트리거하고, 듣고 싶은 이벤트 공개 Vue 인스턴스를 사용하여 EventBus.$on('demo',() => {})을 듣습니다. 직설적으로 말하면, 메시지를 다른 장소로 보내고 다른 장소에서 메시지를 수신하는 공개 구성 요소가 있습니다. 그래서 메시지를 보내고 받는 것이 자체적으로 구현되므로 이를 중앙 이벤트 버스라고 부릅니다. 코드는 다음과 같습니다. libs/EventBus.jsimport Vue from 'vue'; const EventBus = new Vue(); export default EventBus;
2. 라우팅 훅 beforeEach
beforeEach 훅 함수를 통해 해당 컴포넌트의 beforeEnter 이벤트가 발생하는 경우 경로가 변경되었습니다. 코드는 다음과 같습니다: router/index.jsimport 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. 전역 믹스인 객체를 생성합니다
여기서 Enter 이전에 경로 전환 이벤트 모니터링 및 구성 요소 인스턴스 후크 기능 트리거가 구현됩니다. libs/beforeEnterMixin.jsimport 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() {} };
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>
vue에서 탭 및 전환 기능을 구현하는 방법에 대한 자세한 설명
위 내용은 Vue+beforeEnter는 후크 기능을 사용합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!