아주 실 용적 인 vue 네 비게 이 션 갈고리.

네 비게 이 션 갈고리
(번역자:"내 비게 이 션"은 경로 가 바 뀌 고 있 음 을 나타 낸다.)
이름 그대로 vue-router 가 제공 하 는 네 비게 이 션 갈 고 리 는 네 비게 이 션 을 차단 하여 점프 를 완성 하거나 취소 하 는 데 사 용 됩 니 다.경로 내 비게 이 션 이 발생 할 때 갈 고 리 를 실행 할 수 있 는 여러 가지 방식 이 있 습 니 다.전체 적 으로 하나의 경로 가 독점 적 이거 나 구성 요소 급 입 니 다.
전역 갈고리
router.beforeach 를 사용 하여 전역 before 갈 고 리 를 등록 할 수 있 습 니 다:

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
 // ...
})

네 비게 이 션 이 실 행 될 때 전역 의 before 갈 고 리 는 생 성 순서에 따라 호출 됩 니 다.갈 고 리 는 비동기 해석 으로 실 행 됩 니 다.이 때 내 비게 이 션 은 모든 갈고리 resolve 가 끝나 기 전에 기다 리 고 있 습 니 다.
각 갈고리 방법 은 세 개의 인 자 를 받는다.
to:Route:곧 들 어 갈 목표 경로 대상
from:경로:현재 내 비게 이 션 이 떠 나 려 는 경로
next:Function:이 방법 을 사용 하여 이 갈 고 리 를 resolve 해 야 합 니 다.실행 효 과 는 next 방법의 호출 매개 변수 에 의존 합 니 다.
next():파이프 의 다음 갈 고 리 를 진행 합 니 다.모든 갈고리 가 실행 되면 내 비게 이 션 상 태 는 confirmed(확인)입 니 다.
next(false):현재 내 비게 이 션 을 중단 합 니 다.브 라 우 저의 URL 이 변경 되면(사용자 가 수 동 또는 브 라 우 저 후퇴 버튼 일 수 있 음)URL 주 소 는 from 경로 에 대응 하 는 주소 로 초기 화 됩 니 다.
next('/')또는 next({path:'/'}):다른 주소 로 이동 합 니 다.현재 내 비게 이 션 이 중 단 된 후에 새로운 내 비게 이 션 을 진행 합 니 다.
next 방법 을 사용 해 야 합 니 다.그렇지 않 으 면 갈고리 가 resolved 되 지 않 습 니 다.
마찬가지 로 전역 적 인 after 갈 고 리 를 등록 할 수 있 습 니 다.그러나 before 갈고리 처럼 after 갈 고 리 는 next 방법 이 없어 서 내 비게 이 션 을 바 꿀 수 없습니다.

router.afterEach(route => {
 // ...
})

어떤 길 은 혼자 즐 기 는 갈고리 이다.
경로 설정 에서 beforenter 갈 고 리 를 직접 정의 할 수 있 습 니 다.

const router = new VueRouter({
 routes: [
 {
  path: '/foo',
  component: Foo,
  beforeEnter: (to, from, next) => {
  // ...
  }
 }
 ]
})

이 갈고리 들 은 전역 before 갈고리 의 방법 매개 변수 와 같다.
구성 요소 내의 갈고리
마지막 으로,beforeRouteEnter 와 beforeRouteLeave 를 사용 하여 루트 구성 요소 에서 루트 내 비게 이 션 갈 고 리 를 직접 정의 할 수 있 습 니 다.

const Foo = {
 template: `...`,
 beforeRouteEnter (to, from, next) {
 //              confirm    
 //  ！ ！       `this`
 //         ，         
 },
 beforeRouteLeave (to, from, next) {
 //                
 //          `this`
 }
}

beforeRouteEnter 고 리 는 this 에 접근 할 수 없습니다.갈고리 가 내 비게 이 션 확인 전에 호출 되 었 기 때문에 곧 등장 할 새 구성 요 소 는 아직 만 들 지 않 았 습 니 다.
단,next 에 리 셋 을 통 해 구성 요소 인 스 턴 스 를 방문 할 수 있 습 니 다.내 비게 이 션 이 확 인 될 때 리 셋 을 실행 하고 구성 요소 인 스 턴 스 를 리 셋 방법의 매개 변수 로 합 니 다.

beforeRouteEnter (to, from, next) {
 next(vm => {
 //    `vm`       
 })
}

beforeRoute Leave 에서 this 를 직접 방문 할 수 있 습 니 다.이 leave 갈 고 리 는 수정 사항 을 저장 하기 전에 갑자기 떠 나 는 것 을 금지 하 는 데 사용 된다.next(false)를 통 해 내 비게 이 션 을 취소 할 수 있 습 니 다.
프로젝트 를 할 때 수 요 는 페이지 를 닫 을 때 고객 에 게 상 자 를 팝 업 하여 고객 이 머 무 는 시간 을 늘 리 는 것 입 니 다.최근 에 이 갈 고 리 를 보 니 매우 좋다.
본 고 는 이미《Vue.js 전단 구성 요소 학습 튜 토리 얼》로 정리 되 었 으 니,여러분 의 학습 과 독 서 를 환영 합 니 다.
vue.js 구성 요소 에 대한 튜 토리 얼 은 주제vue.js 구성 요소 학습 강좌를 클릭 하여 학습 하 십시오.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.