Vue-router에는 JavaScript에 어떤 후크와 애플리케이션이 있나요?

이 기사의 내용은 Vue-router가 JavaScript에 어떤 후크와 애플리케이션을 가지고 있는지에 대한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Vue-router에는 어떤 후크가 있나요? 사용 시나리오?

라우터 구현은 여기를 클릭하세요

우리는 이전에 Hooks가 무엇인지에 대해 이야기했으며 여기에서도 이를 반복하겠습니다. 그것들은 영어로 Hooks라고 불리며, 전문적으로는 Hooks라고 합니다. 라이프 사이클은 가식적입니다. 클릭하면 가드를 호출할 수 있습니다...

vue-router는 또한 3단계 메모리로 구분되는 후크 개념을 가지고 있습니다.

• 글로벌 가드

• 경로에 대한 독점 가드입니다.

• 컴포넌트 전용 가드

글로벌 가드

는 이해하기 쉽습니다. 글로벌 가드는 글로벌 라우터 작업을 모니터링할 수 있습니다.

• router.beforeEach는 경로 앞에 있을 때 트리거됩니다.

const router = new VueRouter({ ... }) // to 要进入的目标路由对象 // from 当前的路由对象 // next resolve 这个钩子，next执行效果由next方法的参数决定 // next() 进入管道中的下一个钩子 // next(false) 中断当前导航 // next({path}) 当前导航会中断，跳转到指定path // next(error) 中断导航且错误传递给router.onErr回调 // 确保前置守卫要调用next，否然钩子不会进入下一个管道 router.beforeEach((to, from, next) => { // ... })

• router.afterEach는 경로가 뒤쪽에 있을 때 트리거됩니다.

// 与前置守卫基本相同，不同是没有next参数 router.afterEach((to, from) => { // ... })

• router.beforeResolve

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

const Demo = { template: `...`, beforeRouteEnter (to, from, next) { ... }, // 在当前路由改变，但是该组件被复用时调用 beforeRouteUpdate (to, from, next) { ... }, beforeRouteLeave (to, from, next) { ... } }

• beRouteEnter 이전에는 현재 구성 요소에 대한 정보를 가져올 수 없습니다. 구성 요소가 아직 생성되었으므로 다음(vm => {console.log(vm)})을 전달할 수 있습니다. 현재 구성 요소의 이를 반환하여 몇 가지 논리적 작업을 수행합니다

위 내용은 Vue-router에는 JavaScript에 어떤 후크와 애플리케이션이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!