집 > 기사 > 웹 프론트엔드 > Vue가 beforeEnter 후크 기능을 구현하는 방법

Vue가 beforeEnter 후크 기능을 구현하는 방법

php中世界最好的语言원래의: 2018-06-02 10:54:251990검색

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