beforeEnter 후크 기능 사용(코드 첨부)

이번에는 beforeEnter 후크 기능(코드 포함) 사용법과 beforeEnter 후크 기능 사용 시 주의사항에 대해 소개하겠습니다. (다음은 실제 사례인데 한번 살펴보겠습니다.

왜 당신이 하는가? beforeEnter 후크 기능을 직접 만들어야 합니까?

문제 시나리오를 살펴보세요. 프로젝트에 단어 목록 페이지가 있습니다. 각 셀은 해당 단어가 마스터되었는지 여부를 표시합니다. 단어를 학습하고 해당 단어가 마스터되었는지 표시할 수 있으며, 세부정보 페이지에서 앞으로 및 뒤로 버튼을 클릭하여 다른 단어도 학습할 수 있으므로 뒤로를 클릭하면 단어 목록에 모든 단어의 최신 상태가 표시됩니다. 사용자가 마스터한 최종 페이지 관계는 다음과 같습니다.

wordListPage ——> wordDetail(일련의 단어 학습, 종료) ——> wordListPage(단어 목록 새로 고침)

위 시나리오에서는 Vue 수명주기 함수를 사용할 수 없습니다. 왜냐하면 Vue의 수명주기 함수는 beforeCreate, 생성됨, beforeMounted, 마운트 등과 같기 때문입니다. 이는 구성 요소가 초기화될 때만 호출되지만 구성 요소(VM 인스턴스)가 다음에서 나올 때 호출됩니다. 캐시(예: $route.go(-1), keep-alive), 수명주기 함수가 더 이상 호출되지 않으므로 단어 세부정보 페이지에서 목록 페이지로 돌아갈 때 적절한 시간을 찾을 수 없습니다.

물론 위의 경우에는 상대적으로 적은 수의 시나리오가 있지만 여전히 beforeEnter 후크가 필요합니다. function

종속 지식 포인트:

Route: vue-router

Mixin: mixin

1. 중앙 이벤트 버스
1.

3. 중앙을 위해 이벤트 버스의 경우, 간단한 이해는 공용 Vue 인스턴스(EventBus)를 생성하고 다른 위치에서 동일한 인스턴스를 사용하여 EventBus.$ 방출('demo') 메시지를 트리거하고, 공용 Vue 인스턴스를 사용하여 EventBus.$on( 'demo',() => {}) 좀 더 명확하게 말하면 다양한 장소에 메시지를 보내고 모니터링하는 그런 공용 구성 요소가 있습니다. 메시지 송수신을 자체적으로 구현하므로 이를 중앙 이벤트 버스라고 부릅니다.

코드는 다음과 같습니다: libs/.EventBus.js

import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;

라우팅 후크를 살펴보겠습니다. function beforeEach

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()
  }
  
})

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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

vue+webpack을 사용하여 비동기 로딩을 만드는 방법

vue 라우터 동적 라우팅 작업 하위 라우팅

위 내용은 beforeEnter 후크 기능 사용(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!