Vue의 네비게이션 가드는 무엇입니까?

탐색 가드에는 다음이 포함됩니다. 1. 전역 프론트 가드 "beforeEach", 2. 전역 구문 분석 가드 "beforeResolve", 3. 경로 전용 가드 "beforeEnter", 4. 구성 요소 "beforeRouteEnter" 및 "beforeRouteLeave".

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

vue-router에서 제공하는 내비게이션 가드는 주로 점프하거나 취소하여 내비게이션을 보호하는 데 사용됩니다. 경로 탐색 프로세스를 구축할 수 있는 기회는 여러 가지가 있습니다. 전역적으로, 단일 경로에 대해 단독으로 또는 구성 요소 수준에서 말이죠.

매개변수나 쿼리를 변경해도 진입/탈퇴 탐색 가드가 실행되지 않는다는 점을 기억하세요. $route 객체를 관찰하거나 beforeRouteUpdate 구성 요소 내 가드를 사용하여 이러한 변경 사항에 대응할 수 있습니다.

Global before Guard

outer.beforeEach를 사용하여 전역 beforeguard를 등록할 수 있습니다.

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

내비게이션이 트리거되면 생성된 순서대로 전역 beforeguard가 호출됩니다. Guard는 비동기적으로 구문 분석되고 실행되며 모든 Guard가 해결될 때까지 탐색이 대기됩니다.

각 가드 메소드는 세 가지 매개변수를 받습니다:

• to: Route: 진입하려는 대상 경로 객체

• from: Route: 현재 탐색이 곧 떠나려는 경로

• next: 기능: 특정 이 후크를 해결하려면 이 메서드를 호출해야 합니다. 실행 효과는 다음 메서드의 호출 매개변수에 따라 달라집니다.

  • next(): 파이프라인의 다음 후크로 진행합니다. 모든 Hook이 실행되면 탐색 상태가 확인됩니다.

  • next(false): 현재 탐색을 중단합니다. 브라우저의 URL이 변경되면(아마도 사용자가 수동으로 또는 브라우저의 뒤로 버튼을 사용하여) URL 주소는 from 경로에 해당하는 주소로 재설정됩니다.

  • next('/') 또는 next({ path: '/' }): 다른 주소로 이동합니다. 현재 탐색이 중단되고 새 탐색이 시작됩니다. 임의의 위치 객체를 next에 전달할 수 있으며, replacement: true, name: 'home' 및 라우터 링크에서 prop 또는 router.push에 사용되는 모든 옵션을 설정할 수 있습니다.

  • next(error): (2.4.0+) next에 전달된 매개변수가 Error 인스턴스인 경우 탐색이 종료되고 오류는 router.onError()에 의해 등록된 콜백으로 전달됩니다.

특정 탐색 가드에서 다음 함수가 정확히 한 번 호출되는지 확인하세요. 두 번 이상 나타날 수 있지만 모든 논리적 경로가 겹치지 않는 경우에만 가능합니다. 그렇지 않으면 후크가 구문 분석되지 않거나 오류가 보고됩니다. 다음은 사용자가 인증에 실패할 때 /login으로 리디렉션하는 예입니다.

// BAD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  // 如果用户未能验证身份，则 `next` 会被调用两次
  next()
})
// GOOD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

Global Resolution Guard

2.5.0의 새로운 기능

2.5.0+에서는 router.beforeResolve Global Guard를 사용하여 등록할 수 있습니다. 이는 탐색이 확인되기 전과 모든 구성 요소 내 가드 및 비동기 경로 구성 요소가 구문 분석된 후에 구문 분석 가드가 호출된다는 점을 제외하면 router.beforeEach와 유사합니다.

라우팅 전용 가드

라우팅 구성에서 beforeEnter 가드를 직접 정의할 수 있습니다.

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

이 가드의 메서드 매개변수는 전역 사전 가드와 동일합니다.

구성 요소 내의 보호

마지막으로 라우팅 구성 요소 내에서 직접 다음 경로 탐색 보호를 정의할 수 있습니다.

• const Foo = {
    template: `...`,
    beforeRouteEnter(to, from, next) {
      // 在渲染该组件的对应路由被 confirm 前调用
      // 不！能！获取组件实例 `this`
      // 因为当守卫执行前，组件实例还没被创建
    },
    beforeRouteUpdate(to, from, next) {
      // 在当前路由改变，但是该组件被复用时调用
      // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
      // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
      // 可以访问组件实例 `this`
    },
    beforeRouteLeave(to, from, next) {
      // 导航离开该组件的对应路由时调用
      // 可以访问组件实例 `this`
    }
  }

  beforeRouteEnter 가드는 탐색이 확인되기 전에 가드가 호출되어 곧 나타날 새 구성 요소가 아직 생성되지 않았기 때문에 이에 액세스할 수 없습니다.

그러나 콜백을 next에 전달하면 구성 요소 인스턴스에 액세스할 수 있습니다. 탐색이 확인되면 콜백을 실행하고, 콜백 메소드의 매개변수로 컴포넌트 인스턴스를 전달합니다.

• beforeRouteEnter (to, from, next) {
    next(vm => {
      // 通过 `vm` 访问组件实例
    })
  }

  beforeRouteEnter는 콜백을 다음으로 전달하는 것을 지원하는 유일한 가드입니다. beforeRouteUpdate 및 beforeRouteLeave의 경우 이미 사용 가능하므로 콜백 전달이 필요하지 않기 때문에 지원되지 않습니다.

  beforeRouteUpdate (to, from, next) {
    // just use `this`
    this.name = to.params.name
    next()
  }

이 떠나기 가드는 일반적으로 사용자가 변경 사항을 저장하기 전에 갑자기 떠나는 것을 방지하는 데 사용됩니다. 이 탐색은 next(false)로 취소할 수 있습니다.

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

  내비게이션 구문 분석 프로세스가 완료되었습니다

내비게이션이 트리거됩니다.

비활성화된 구성 요소에서 beforeRouteLeave 가드를 호출하세요.

각 가드 전에 전역을 호출하세요.

• 재사용된 구성요소에서 beforeRouteUpdate 가드(2.2+)를 호출하세요.

• 라우팅 구성에 들어가기 전에 전화하세요.

• 비동기 라우팅 구성 요소를 해결합니다.

• 활성화된 구성 요소에 RouteEnter 전에 전화하세요.

• BeforeResolve 가드(2.5+) 전역을 호출합니다.

• 내비게이션이 확인되었습니다.

• Each Hook 이후 전역을 호출하세요.

• DOM 업데이트를 트리거합니다.

• beforeRouteEnter 가드에서 next로 전달된 콜백 함수를 호출하면 생성된 컴포넌트 인스턴스가 콜백 함수의 매개변수로 전달됩니다.

【관련 추천: "vue.js tutorial"】

위 내용은 Vue의 네비게이션 가드는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!