Vue2.X에서 라우팅 및 후크 기능 사용

이제 Vue2.X를 기반으로 한 라우팅 및 Hook 기능에 대해 자세히 설명하겠습니다. 참고할 만한 가치가 있으며 모든 분들께 도움이 되기를 바랍니다.

최근 회사 일이 좀 바빠서 오랫동안 기사를 업데이트하지 않았고 새로운 것을 배운 적이 없습니다.

오늘은 이 라우팅 후크에 대해 이야기해 보겠습니다.

Navigation 및 후크 기능:

Navigation: 경로가 변경됩니다. 키워드: 경로 변경

Hook 기능: 경로 전환의 여러 단계에서 다른 노드 기능을 호출합니다(제 생각에 후크 기능은 다음과 같습니다. 트리거되는 함수) 특정 노드 및 타이밍에 따라).

후크 기능은 주로 탐색을 가로채고 점프를 완료하거나 취소하고 탐색의 여러 단계에서 다양한 기능을 실행하는 데 사용됩니다. 마지막으로 후크 기능의 실행 결과는 탐색에 수행할 작업을 알려줍니다. .

내비게이션은 모든 후크가 해결될 때까지 기다리고 있으며 후크 기능이 다음에 수행할 작업을 알려줄 때까지 기다립니다. next()를 사용하여 지정합니다.

로그인 예를 들어보겠습니다.

router.beforeEach(({meta, path}, from, next) => {　　 
 
　　const {auth = true} = meta  // meta代表的是to中的meta对象，path代表的是to中的path对象 
 
　　var isLogin = Boolean(store.state.user.id) // true用户已登录， false用户未登录　 
　　 
　　if (auth && !isLogin && path !== '/login') { // auth 代表需要通过用户身份验证，默认为true，代表需要被验证， false为不用检验 
　　　　return next({ path: '/login' }) // 跳转到login页面 
　　} 
 
 
　　next() // 进行下一个钩子函数 
})

먼저 beforeEach 후크 함수에 대해 이야기하겠습니다. 이는 전역 before 후크 함수로, 모든 경로가 바뀔 때마다 모두 실행되어야 한다는 의미입니다.

3개의 매개변수:

to:(경로 라우팅 객체) 입력하려는 대상 라우팅 객체의 to 객체 아래 속성: 경로 매개변수 쿼리 해시 fullPath 일치 이름 메타(일치 아래, 하지만 이 예제는 직접 사용할 수 있습니다)

from: (경로 라우팅 개체) 현재 내비게이션이 떠나려고 하는 경로

next: (함수 함수) 이 후크를 해결하려면 이 메서드를 호출해야 합니다. 호출 방법: next(매개변수 또는 비어 있음) ***다음을 호출해야 함(매개변수가 없는 경우): 파이프라인에서 다음 후크를 수행하면 탐색 상태가 확인됩니다.

next('/') 또는 next({ path: '/' }): 다른 주소로 이동합니다. 현재 탐색이 중단되고 새 탐색이 시작됩니다.

전역 후크 기능의 전역 afterEach:

after 후크에는 next 메서드가 없으며 탐색을 변경할 수 없습니다. 탐색 실행 방법이 결정된 후 첨부된 실행이 있음을 의미합니다. 후크 기능

컴포넌트의 후크 기능:

(beforeRouteEnter 및 beforeRouteLeave와 감시 기능 포함)

Vue2.X는 vue1.X보다 컴포넌트 내 후크 기능이 훨씬 적습니다. .

구성 요소 자체의 수명 주기 후크 기능을 사용하여 활성화 및 비활성화를 대체합니다.

$router의 감시자를 사용하여 경로 변경에 응답합니다.

canActivate는 라우터 구성의 beforeEnter에서 구현할 수 있습니다.

canDeactivate는 beforeRouteLeave로 대체되었습니다. 구성 요소의 루트 수준 정의에 지정됩니다. 이 후크 함수는 구성 요소 인스턴스를 컨텍스트로 사용하여 호출됩니다.

canReuse는 혼란스럽고 거의 사용되지 않기 때문에 제거되었습니다.

ajax를 사용하여 데이터(to, from, next) 후크를 가져오고 대신 컴포넌트에서 beforeRouteEnter(to, from, next)를 사용하세요.

위 내용은 모두에게 도움이 되기를 바랍니다. 미래에.

관련 기사:

vue-cli 프로젝트의 ProxyTable 도메인 간 문제

React 구성 요소에서 ref를 사용하는 방법

webpack에서 devtool 사용에 대한 자세한 설명

위 내용은 Vue2.X에서 라우팅 및 후크 기능 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!