Vue 라우팅 후크 및 애플리케이션 시나리오 요약 공유

이 글은 주로 Vue 라우팅 후크와 응용 시나리오(요약)에 대한 자세한 설명을 소개합니다. 편집자는 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

1. 라우팅 후크 구문

vue-router 공식 문서에서 라우팅 후크는 네비게이션 가드로 번역됩니다. 다음은 문서의 내용을 요약한 것입니다. 포털을 통해서도 공식 웹사이트로 이동할 수 있습니다. 자세한 내용을 읽으려면

라우팅 후크

라우팅 후크는 주로 사용자가 라우팅 변경 시 특별한 처리를 수행하도록 정의됩니다. . 정말 한 입.

일반적으로 Vue는 세 가지 주요 유형의 후크를 제공합니다

1. 전역 후크
2. 특정 경로 전용 후크
3. 구성 요소 내 후크

세 가지 라우팅 후크가 포함됩니다. 공식 소개는 여기

to: Route: 진입하려는 대상 경로 객체
from: Route: 현재 내비게이션이 떠나려는 경로
next: 함수: 이 메서드를 호출해야 이 문제를 해결할 수 있습니다. 훅. 실행 효과는 다음 메서드의 호출 매개변수에 따라 달라집니다.
next(): 파이프라인의 다음 후크로 진행합니다. 모든 Hook이 실행되면 탐색 상태가 확인됩니다.
next(false): 현재 탐색을 중단합니다. 브라우저의 URL이 변경되면(아마도 사용자가 수동으로 또는 브라우저의 뒤로 버튼을 사용하여) URL 주소는 from 경로에 해당하는 주소로 재설정됩니다.
next('/') 또는 next({ path: '/' }): 다른 주소로 이동합니다. 현재 탐색이 중단되고 새 탐색이 시작됩니다.

(1) 글로벌 가드(글로벌 라우팅 후크)

router.beforeEach를 사용하여 글로벌 프론트 가드를 등록할 수 있습니다.

const router = new VueRouter({ ... })

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

각 가드 메소드는 세 가지 매개변수를 허용합니다:

1. to: Route: About to The enter target path object

2. from: Route: 현재 내비게이션이 떠나는 경로

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

참고: 전역 라우팅 후크를 사용할 때는 반드시 next()를 호출하세요!!!

(2) 라우팅 전용 가드(인라우트 후크)

라우팅 후크를 사용하여 구성에서 beforeEnter 가드를 직접 정의할 수 있습니다.

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

이 가드는 전역 사전 가드와 동일한 메서드 매개변수를 갖습니다.

(3) 구성 요소 내 가드(구성 요소 내 후크)

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

1. beforeRouteEnter

2. beforeRouteUpdate(2.2의 새로운 기능)

3. beforeRouteLeave

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`
 }
}

2. 실제 개발에서 라우팅 훅을 적용하는 경우는 거의 없습니다. 실제 프로젝트에서는 컴포넌트 내에서 beforeRouteLeave만 사용했습니다. 다음 세 가지 상황 유형:

(1) 현재 구성 요소에서 타이머 지우기

구성 요소에 타이머가 있는 경우 경로가 전환되면 beforeRouteLeave를 사용하여 메모리 점유를 피하기 위해 타이머를 지울 수 있습니다.

beforeRouteLeave (to, from, next) {
 window.clearInterval(this.timer) //清楚定时器
 next()
}

(2) 페이지에 닫히지 않은 창이 있거나 저장되지 않은 내용이 있는 경우 페이지 이동을 방지하세요

페이지에 이동하기 전에 저장해야 하는 중요한 정보가 있거나 팝업 상자가 있는 경우. 사용자가 점프하는 것을 방지해야 합니다

 beforeRouteLeave (to, from, next) {
 //判断是否弹出框的状态和保存信息与否
 if (this.dialogVisibility === true) {
  this.dialogVisibility = false //关闭弹出框
  next(false) //回到当前页面, 阻止页面跳转
 }else if(this.saveMessage === false) {
  alert('请保存信息后退出!') //弹出警告
  next(false) //回到当前页面, 阻止页面跳转
 }else {
  next() //否则允许跳转
 }
}

(3) 관련 콘텐츠를 Vuex 또는 세션에 저장

사용자가 페이지를 닫아야 하는 경우 공개 정보를 세션 또는 Vuex

 beforeRouteLeave (to, from, next) {
  localStorage.setItem(name, content); //保存到localStorage中
  next()
}

에 저장할 수 있습니다. 관련 권장 사항:

Vue 라우팅 점프 시 사용자가 로그인했는지 확인하는 기능

Vue 라우팅 중첩의 SPA 구현 단계에 대한 자세한 설명

Vue 라우팅 점프 문제를 요약하는 예제 튜토리얼

위 내용은 Vue 라우팅 후크 및 애플리케이션 시나리오 요약 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!