이번에는 Vue에서 beforeEnter 후크 기능을 구현하는 방법을 보여 드리겠습니다. Vue에서 beforeEnter 후크 기능을 구현하는 데 있어 주의 사항은 무엇입니까?
왜 우리는 beforeEnter 후크 함수를 직접 만들어야 하나요?
문제 시나리오를 살펴보세요. 프로젝트에 단어 목록 페이지가 있으며 각 셀에는 단어가 마스터되었는지 여부가 표시됩니다. 셀을 클릭하면 단어를 학습하고 여부를 표시할 수 있는 세부 정보 페이지로 들어갑니다. 단어가 마스터 되었으며, 상세 페이지에서 앞으로 가기 버튼과 뒤로 가기 버튼을 눌러 다른 단어도 학습하실 수 있습니다. 따라서 돌아가기를 클릭하면 단어 목록에 모든 단어 사용자의 최신 상태가 표시되어야 합니다.
최종 페이지 관계는 다음과 같습니다.
wordListPage ——> wordDetail(일련의 단어 학습, exit) ——> wordListPage(단어 목록 새로 고침)
위 시나리오에서는 다음을 사용합니다. Vuelifecycle 함수는 작동하지 않습니다. 왜냐하면 beforeCreate, Created, beforeMounted, Mounted 등과 같은 Vue의 수명 주기 함수는 구성 요소가 초기화될 때만 호출되지만 구성 요소(VM 인스턴스)가 캐시( $route.go(-1), keep-alive 등), 수명주기 함수는 더 이상 호출되지 않습니다. 따라서 단어상세페이지에서 목록페이지로 돌아왔을 때 데이터 업데이트를 시작하기에 적합한 기간을 찾을 수 없습니다. 따라서 위의 시나리오는 잘 처리될 수 없습니다.
물론 위의 시나리오는 비교적 드물지만 beforeEnter 후크 기능의 존재는 여전히 필요합니다.
beforeEnter 후크 기능 구성
지식 포인트에 따라 다름:
routing: vue-router
Mixin: mixin
C 입구 이벤트 버스
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. 전역 믹스인 객체를 생성합니다
여기서 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.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를 직접 테스트할 수 있습니다. 현재는 프로젝트가 많은 곳이면 어디든 사용하게 됩니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
상태 하위 구성 요소를 업데이트하는 상위 구성 요소의 vuex 메서드를 처리하는 방법은 시간에 맞춰 렌더링을 업데이트할 수 없습니다.
vue를 사용하여 SMS 확인 성능 최적화를 달성하는 방법
위 내용은 Vue가 beforeEnter 후크 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!