Vue 라우팅 후크 사용에 대한 실제 튜토리얼

이번에는 Vue 라우팅 후크를 사용하는 방법에 대한 실용적인 튜토리얼을 가져왔습니다. Vue 라우팅 후크를 사용할 때 주의 사항은 무엇입니까?

1. 라우팅 후크 구문

vue-router 공식 문서에서 라우팅 후크는 네비게이션 가드로 번역됩니다. 다음은 문서summary에 있는 내용입니다. 또한 포털을 통해 공식 웹사이트에 접속하여 자세한 내용을 읽을 수도 있습니다

라우팅 후크

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

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

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

3개의 라우팅 후크에는 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:

2. 들어가려는 대상 경로 개체 from: Route: 현재 탐색이 떠나려고 하는 경로

3. 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) 현재 구성 요소에서 timer

을 지웁니다. 구성 요소에 타이머가 있는 경우 경로가 전환되면 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 또는 Session

에 저장하세요. 사용자가 페이지를 닫아야 하는 경우 공개 정보는 세션이나 Vuex에 저장될 수 있습니다.

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 다른 관련 기사를 주목하세요. PHP 중국어 웹사이트에서!

추천 자료:

WeChat 애플릿의 서버에 사진을 업로드하는 방법

JS로 내비게이션 바의 투명한 그라데이션을 구현하는 방법

위 내용은 Vue 라우팅 후크 사용에 대한 실제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!