vue3에서 7가지 유형의 라우팅 가드를 사용하는 방법

라우팅 가드에는 어떤 유형이 있나요?

루트 가드(내비게이션 가드)는 글로벌 가드(3), 경로 독점 가드(1), 컴포넌트 가드(3)의 세 가지 유형으로 나뉩니다.

루트 가드의 세 가지 매개 변수

to: 이동하려는 대상 경로 to

from:

에서 이동할 경로

next: 차단 없이 직접 통과

참고: 주어진 탐색 가드에서 다음 함수가 한 번 호출되었는지 확인해야 합니다. 여러 번 나타날 수 있지만 모든 논리적 경로가 겹치지 않는 경우에만 표시됩니다. 그렇지 않으면 오류가 보고됩니다.

케이스:

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

1. 글로벌 라우팅 가드

글로벌 라우팅 가드에는 글로벌 프론트 가드, 글로벌 포스트 가드, 글로벌 파싱 가드

글로벌 프론트 가드

1. , 경로가 점프하기 전에 트리거됩니다. 이 후크는 주로 로그인 확인에 사용됩니다. 즉, 경로가 점프하기 전에 미리 알리므로 점프 후 너무 늦게 알리지 않습니다.

2.

3. 예: 로그인 판단

router.beforeEach((to,from,next)=>{})

글로벌 포스트 가드

1. 사용 방법: beforeEach와 달리 beforeEach 및 beforeRouteEnter가 완료된 후에 발생합니다. (구성 요소 내 가드). 후크는 다음 기능을 허용하지 않으며 탐색 자체를 변경하지 않습니다

2. 코드:

router.beforeEach((to,from,next)=>{
  if(to.path == '/login' || to.path == '/register'){
    next();
  }else{
    alert('您还没有登录，请先登录');
    next('/login');
  }
})

전역 구문 분석 가드

1. 이 후크는 beforeEach와 유사하며 before에도 실행됩니다. 차이점은 탐색이 확인되기 전과 동시에 모든 구성 요소에서 가드 및 비동기 라우팅 구성 요소가 해결된 후, 즉 구성 요소의 beforeEach 및 beforeRouteEnter 이후, afterEach가 호출되기 전이라는 것입니다.

2. 코드:

router.afterEach((to,from)=>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->})

1. 구성 요소의 가드

구성 요소에는 세 개의 가드가 있습니다: 경로가 들어가기 전 beforeRouteEnter, 경로가 떠날 때 beforeRouteLeave, 페이지가 업데이트될 때 beforeRouteUpdate

• beforeRouteEnter(to, from, next)

1. 사용 방법: 메서드와 동일한 수준에서 작성된 구성 요소 템플릿에 사용: {}, 구성 요소 라우팅 가드는 각각의 별도 vue 파일

2에 작성된 라우팅 가드입니다. 코드:

router.beforeResolve((to,from,next)=>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->})

beforeRouteUpdate(to, from, next)

1. 사용 방법: 구성 요소 템플릿에 사용되며 메서드와 동일한 수준에서 작성됨: {}, 구성 요소 경로 가드는 각각의 별도 vue 파일에 작성된 경로 가드입니다

2 .Code:

beforeRouteEnter(to, from, next) {
    // 在组件生命周期beforeCreate阶段触发
    console.log('组件内路由前置守卫 beforeRouteEnter', this) // 访问不到this
    next((vm) => {
      console.log('组件内路由前置守卫 vm', vm) // vm 就是this
    })
  },

• beforeRouteLeave(to, from, next)

1. 사용법: 구성 요소 템플릿에 사용되며 메서드와 동일한 수준에서 작성됨: {}, 구성 요소 경로 보호는 각각의 별도 경로에 작성됩니다. vue 파일의 가드

2. 코드:

beforeRouteUpdate (to, from, next) {
    // 同一页面，刷新不同数据时调用，
    // 可以访问组件实例 
}

경로 단독 가드

경로 단독 가드는 하나만 있습니다: beforeEnter는 경로에 들어갈 때 트리거됩니다.

• 경로 단독 가드 beforeEnter(to, from, next )

1. 사용법: router.js

에서 사용되는 경로 독점 가드는 라우팅 구성 페이지

2.Navigation 파싱 프로세스

1에서 경로에 대해 별도로 구성된 가드입니다. 다른 경로로의 진입 트리거

2. 경로를 떠나기 위해 컴포넌트 가드를 호출하세요. beforeRouteLeave
3. beforeEach
4. 재사용된 컴포넌트에서 beforeRouteUpdate를 호출하세요
5. 라우팅 구성에서 beforeEnter를 호출하세요. .비동기 라우팅 구성요소를 해결합니다
7. 진입하려는 라우팅 구성요소에서 beforeRouteEnter를 호출합니다.Resolve
9. 탐색이 확인되기 전에 전역 포스트 후크를 호출합니다
11. Mounted
12. beforeRouteEnter 가드

에서 next로 전달된 콜백 함수를 실행합니다.

위 내용은 vue3에서 7가지 유형의 라우팅 가드를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!