Vue의 탐색 후크는 무엇입니까?

Vue에는 세 가지 유형의 탐색 후크가 있습니다. 1. 라우팅 예제에서 직접 작동하는 후크 기능을 의미하는 전역 가드 후크는 모든 라우팅 구성 구성 요소가 트리거된다는 특징이 있습니다. 2. 경로 전용 가드 후크는 단일 경로 구성 시에도 설정할 수 있는 후크 기능을 말하며, 해당 경로에서만 작동할 수 있습니다. 3. 로컬 가드 후크는 구성 요소 내에서 실행되는 후크 기능을 말하며 배열의 수명 주기 기능과 유사하며 라우팅으로 구성된 구성 요소에 추가된 수명 주기 후크 기능과 동일합니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

내비게이션 후크의 역할

• vue-router에서 제공하는 네비게이션 후크는 주로 네비게이션을 가로채서 점프를 완료하거나 취소할 수 있도록 하는 데 사용됩니다.

네비게이션 훅의 분류

• 글로벌 가드
• 루트 전용 가드
• 부분 가드

1. 함수에서 직접 작동하는 라우팅 예제 Hook , 모든 라우팅 구성 구성 요소가 트리거되는 것이 특징입니다. 간단히 말해서 라우팅을 트리거하면 이러한 후크 기능이 트리거됩니다. 후크 함수 실행 순서에는 beforeEach, beforeResolve 및 afterEach가 포함됩니다.

<p>[beforeEach]<a id="beforeEachtofromnext_8"></a></p>: 경로가 점프하기 전에 트리거됩니다. 매개변수에는 to, from 및 next가 포함됩니다. 이 후크는 주로 로그인 확인에 사용됩니다. 즉, 경로가 점프되지 않았습니다. 너무 늦지 않도록 미리 알려주시기 바랍니다.

 router.beforeEach  router.beforeResolve  router.afterEach
    const router = new VueRouter({ ... });
    router.beforeEach((to, from, next) => {
        // do someting
    });

<strong>[beforeEach]</strong>：在路由跳转前触发，参数包括to,from,next三个，这个钩子作用主要是用于登录验证，也就是路由还没跳转提前告知，以免跳转了再通知就为时已晚。

 const router = new VueRouter({ ... });
    router.beforeEach((to, from, next) => {
        // do someting
    });
  //全局后置钩子，后置钩子并没有 next 函数，也不会改变导航本身
    router.afterEach((to, from) => {
        // do someting
    });

• to：代表要进入的目标，它是一个路由对象
• from：代表当前正要离开的路由，同样也是一个路由对象
• next：这是一个必须需要调用的方法，而具体的执行效果则依赖next方法调用的参数

<strong>[beforeResolve]</strong>：这个钩子和beforeEach类似，也是路由跳转前触发，参数也是to,from,next三个，和beforeEach区别官方解释为：

 区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就会被调用。

即在beforeEach和组件内beforeRouteEnter之后，afterEach之后，afterEach之前调用。

<strong>[afterEach]</strong>：和beforeEach相反，它是在路由跳转完成之后触发，参数包括to、from，没有了next，它发生在beforeEach和beforeResolve之后，beforeRouteEnter(足迹按内守卫)之前。

  cont router = new VueRouter({
        routes: [
            {
                path: '/file',
                component: File,
                beforeEnter: (to, from ,next) => {
                    // do someting
                }
            }
        ]
    });

2、路由独享守卫

是指在单个路由配置的时候也可以设置的钩子函数，且只能在这个路由下起作用。其位置如下，也就是像File这样的组件都存在这样的钩子函数。目前它只有一个钩子函数beforeEnter。

[beforeEnter]to: 들어갈 대상을 나타내며 라우팅 개체입니다.

from: 현재 출발하는 경로를 나타내며 라우팅 개체이기도 합니다. next: 호출해야 하는 메서드이며 특정 실행 효과는 다음 메소드에 의해 호출되는 매개변수에 따라 달라집니다

[beforeResolve]

: 이 후크는 beforeEach와 유사하며 경로 전에도 트리거됩니다. , from, next 및 beforeEach의 차이점에 대한 공식적인 설명은 다음과 같습니다. 차이점은 탐색이 확인되기 전과 모든 구성 요소의 가드 및 비동기 라우팅 구성 요소가 구문 분석된 후입니다. , 파싱 가드가 호출됩니다.
즉, 컴포넌트 내 beforeEach 및 beforeRouteEnter, afterafterEach 및 before afterEach가 호출됩니다.

<p>[afterEach]</p>: beforeEach와 달리 경로 점프가 완료된 후 트리거됩니다. beforeEach 및 beforeResolve 이후, beforeRouteEnter 이전(가드 내부 발자국).

 const File = {
        template: `<div>This is file</div>`,
        beforeRouteEnter(to, from, next) {
            // do someting
            // 在渲染该组件的对应路由被 confirm 前调用
        },
        beforeRouteUpdate(to, from, next) {
            // do someting
            // 在当前路由改变，但是依然渲染该组件是调用
        },
        beforeRouteLeave(to, from ,next) {
            // do someting
            // 导航离开该组件的对应路由时被调用
        }
    }

2. 경로 독점 가드

단일 경로 구성 시에도 설정할 수 있는 후크 기능을 말하며, 해당 경로에서만 작동할 수 있습니다. 그 위치는 다음과 같습니다. 즉, File과 같은 컴포넌트에는 이러한 Hook 기능이 있습니다. 현재는 Enter 이전에 하나의 후크 기능만 있습니다.

[beforeEnter]

: beforeEach와 완전히 동일합니다. 둘 다 설정된 경우 beforeEach 직후에 실행됩니다. 에서, 그리고 다음.

routes:[
      {
          path:'/b',
          component:B,
          beforeEnter:(to,form,next)=>{
             ..... 
          }
      }
  ]

3. 로컬 가드

는 배열의 라이프사이클 기능과 유사하게 컴포넌트 내에서 실행되는 후크 기능을 말하며, 이는 라우팅으로 구성된 컴포넌트에 추가된 라이프사이클 후크 기능과 동일합니다. Hook 함수에는 실행 순서대로 beforeRouteEnter, beforeRouteUpdate(2.2의 새로운 기능), beforeRouteLeave가 포함됩니다. 실행 위치는 다음과 같습니다. 🎜rrreee🎜🎜🎜🎜🎜Route A -> B 경로일 때 경로 점프 탐색 구문 분석 프로세스🎜🎜 🎜 🎜1. 구성요소 A에서 휴가 가드를 호출합니다. 구성 요소 A의 beforeRouterLeave🎜🎜2는 beforeEach 가드 전역을 호출합니다. router.beforeEach🎜🎜3 그런 다음 경로 B 구성에서 beforeEnter를 실행합니다. 🎜rrreee🎜4. 그런 다음 컴포넌트 B의 진입 가드를 실행합니다. 컴포넌트 B의 BeforeRouterEnter🎜🎜5는 전역 beforeResolve 가드(2.5+)를 호출합니다. router.beforeResolve🎜🎜6. 탐색이 확인되었습니다. 🎜🎜7. AfterEach 후크 전역을 호출합니다. router.afterEach🎜🎜8. DOM 업데이트를 트리거합니다. 🎜🎜【관련 추천: 🎜vuejs 동영상 튜토리얼🎜, 🎜웹 프론트엔드 개발🎜】🎜

위 내용은 Vue의 탐색 후크는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!