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

router.beforeEach와 유사하며 모든 구성 요소 및 비동기 라우팅 구성 요소의 가드 후에 트리거됩니다.

라우트 전용 가드

매개변수와 의미는 전역 가드와 동일하지만 정의된 위치가 다릅니다

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

컴포넌트 전용 가드

컴포넌트의 새로운 가드인 beforeRouteUpdate는 컴포넌트가 다음과 같은 경우에 트리거됩니다. /demo/:id와 같이 재사용될 수 있습니다. /demo/1이 /demo/2로 점프할 때 /demo는 재사용이 가능하며 beforeRouteUpdate

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

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

사용 시나리오

가장 일반적인 방법 경로가 진입하기 전에 일부 권한 제어, 경로가 떠날 때 일부 정보, 작업 등을 지우거나 저장합니다

Summary

vue-router 후크에는 글로벌, 로컬 및 구성 요소의 세 가지 유형이 있습니다. 모두 사전 보호 장치가 있습니다. 구성요소가 아직 생성되지 않았기 때문에 구성요소의 사전 가드는 이를 가져올 수 없습니다. Next 매개변수를 전달하면 이를 반환할 수 있으며, 프런트 가드는 다음 메서드를 호출해야 합니다. 그렇지 않으면 그렇지 않습니다. 다음 튜브에 들어가세요

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