Vue 내비게이션 수위 사용 방법 상세 설명

vue-router가 제공하는 내비게이션 수위는 주로 점프하거나 취소하는 방식으로 내비게이션을 수위하는 데 쓰인다.여러 가지 기회가 루트 내비게이션 과정에 심어진다. 전역적, 단일한 루트가 독점적, 또는 구성 요소급이다.매개 변수나 조회의 변화가 들어오거나 떠나는 내비게이션 수위를 촉발하지 않는다는 것을 기억하십시오.$route 대상을 관찰해서 이러한 변화에 대응하거나, before Route Update의 구성 요소 내 수위를 사용할 수 있습니다.네비게이션 수위는 주로 전역 수위, 구성 요소 내 수위와 루트 수위로 나뉜다.다음은 내가 이 세 가지 사용 방법을 각각 말해 보겠다.
전역 수위

const touye = new vueRourter({...})
router.beforeEach(( to, from, next ) => {

	// 
})

네비게이션이 터치될 때, 전역 전방 수위는 창설 순서에 따라 호출됩니다.수위는 비동기 해석 실행입니다. 이 때 내비게이션은 모든 수위 리셋이 끝날 때까지 기다리고 있습니다.각 수위 방법은 세 개의 매개 변수를 수신한다.
to:Route:대상 라우팅 대상
from: Route: 현재 탐색 중인 경로
next:Function:이 방법을 사용해서 이 갈고리를 리셋해야 합니다.실행 효과는next 방법의 호출 매개 변수에 의존합니다.
next (): 파이프의 다음 갈고리를 진행합니다.만약 모든 갈고리가 실행되었다면 내비게이션의 상태는confirmed(확인)입니다.next (false): 현재 내비게이션을 중단합니다.만약 브라우저의 URL이 바뀌었다면 (사용자가 수동으로 하거나 브라우저가 후퇴 단추를 눌렀을 수도 있습니다) URL 주소는from 루트에 대응하는 주소로 재설정됩니다.next ('/') 또는next ({path: '/'}): 다른 주소로 이동합니다.현재 내비게이션이 중단된 후에 새로운 내비게이션을 진행합니다.넥스트에 임의의 위치 대상을 전달할 수 있으며, 리플렉스:true,name: '홈' 같은 옵션과router-link에 사용되는 toprop이나router를 설정할 수 있습니다.push의 옵션입니다.next (error): (2.4.0 +) next에 전송된 인자가 Error의 실례라면 내비게이션이 종료되고 오류는router에 전달됩니다.onError()가 등록한 콜백입니다.넥스트 방법을 사용해야 합니다. 그렇지 않으면 갈고리가 Resolved에 걸리지 않습니다.
루트 독점 수위는 루트 설정에서 Before Enter 수위를 직접 정의할 수 있습니다:

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

})

이 수위들은 전체 국면에서 수위를 선행하는 방법의 매개 변수와 같다.
구성 요소 내의 수위 마지막으로, 당신은 루트 구성 요소 안에서 다음과 같은 루트 내비게이션 수위를 직접 정의할 수 있습니다.
beforeRoute Enter beforeRouteUpdate(2.2 추가) beforeRouteLeave

const Foo = {
	template: '...',
	beforeRouteEnter( to, from, next ) {
		//              confirm    
		//           this
		//          ，           
	},
	beforeRouteUpdata (to, from, next){
			//        ，            
			//        this

	}
	beforeRouteLeave( to, from, next ){
		//               
		//          this
	}
}

before Route Enter 수위는this에 접근할 수 없습니다. 수위가 내비게이션 확인 전에 호출되었기 때문에 곧 등장할 새 구성 요소가 생성되지 않았습니다.단, 구성 요소의 실례에 접근하기 위해next에 리셋을 보낼 수 있습니다.내비게이션이 확인될 때 리셋을 실행하고 구성 요소의 실례를 리셋 방법의 매개 변수로 합니다.

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

before Route Enter는 넥스트에 리셋을 지원하는 유일한 수위입니다.Before Route Update와 Before Route Leave에 있어this는 이미 사용할 수 있기 때문에 리셋 전달을 지원하지 않습니다. 필요하지 않기 때문입니다.

beforeRouteUpdata (to, from, next){
	this.name = to.params.name
	next()

}

이 떠나는 수위는 일반적으로 사용자가 변경 사항을 저장하기 전에 갑자기 떠나는 것을 금지하는 데 쓰인다.이 내비게이션은next(false)를 통해 취소할 수 있다.

beforeRouteLeave( to, from, next ){
	 const answer = window.confirm(' Do you really want to leave? you have unsave changes! ');
	if(answer){
		next();
	}else{
		nest(false)
	}

}

전체 탐색 해결 프로세스
1. 내비게이션이 터치된다.2、부활한 구성 요소에서 수위를 떠나도록 호출합니다.3. 전역적인 before Each 수위를 호출한다.4, 다시 사용하는 구성 요소에서 Before Route Update 수위(2.2+)를 호출합니다.5, 라우팅 구성에서 before Enter를 호출합니다.6. 비동기 라우팅 어셈블리를 확인합니다.7, 활성화된 구성 요소에서 beforeRouteEnter를 호출합니다.8. 전역적인 before Resolve 수위(2.5+)를 호출한다.9. 내비게이션이 확인된다.10. 전역적인 afterEach 갈고리를 호출한다.11. DOM 업데이트를 트리거합니다.12. 만들어진 실례로 Before Route Enter 수위에서next에 전송된 리셋 함수를 호출합니다.