Vue에서 경로 탐색 가드를 사용하여 경로 점프를 제어하는 ​​방법

Vue에서 라우팅은 페이지 간 점프 및 탐색을 제어하는 ​​매우 중요한 부분입니다. 실제 개발에서는 특정 경로를 제어해야 하는 경우가 많습니다. 예를 들어 로그인이 되어야만 접근이 가능하거나 접근을 위해 관리자 권한이 필요한 경우 등이 있습니다. 이때 라우팅 제어를 구현하려면 라우팅 네비게이션 가드를 사용해야 합니다.

경로 내비게이션 가드는 경로 점프를 가로채고 경로 점프 전후에 일부 작업을 수행할 수 있습니다. Vue에서 라우팅 탐색 가드는 일반적으로 전역 탐색 가드와 구성 요소 내 탐색 가드를 사용하여 구현됩니다. 아래에서는 이 두 가지 방법을 각각 사용하는 방법을 소개합니다.

1. 글로벌 네비게이션 가드

글로벌 네비게이션 가드는 글로벌 라우팅을 제어할 수 있으며 일반적으로 Vue 인스턴스에 등록됩니다. 전역 탐색 가드에는 세 가지 후크 기능이 포함되어 있습니다.

1. beforeEach(to, from, next)

이 기능은 경로가 점프하기 전에 실행됩니다.

• to: 점프하려는 라우팅 개체입니다.
• from: 현재 점프 중인 라우팅 개체
• next: 경로 점프를 제어하는 ​​데 사용할 수 있는 콜백 함수

beforeEach 함수에서 조건이 충족되면 경로를 판단하고 계속 점프할 수 있으며, 그렇지 않으면 다음을 사용합니다. 다음 방법은 가로채거나 리디렉션하는 것입니다. 예를 들어 로그인 여부를 결정하려면:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !store.state.isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

2. afterEach(to, from)

이 함수는 경로 점프 후에 실행됩니다.

• to: 방금
로 점프한 라우팅 개체입니다.
• from: 방금 출발 경로 객체

afterEach 함수에서는 접근 기록 기록 등 경로를 처리할 수 있습니다.

router.afterEach((to, from) => {
  // 记录访问记录
})

3. resolve(to, from, next)

이 함수는 라우팅 구성에서 후크 기능을 정의하여 비동기 라우팅 점프를 처리할 수 있습니다.

예:

{
  path: '/dashboard',
  component: Dashboard,
  beforeEnter: (to, from, next) => {
    if (store.state.isAdmin) {
      next()
    } else {
      next('/login')
    }
  }
}

글로벌 내비게이션 가드를 사용할 때 여러 가드가 실행되는 경우 다음 메서드를 사용하여 실행 순서를 제어해야 한다는 점에 유의해야 합니다.

2. 구성 요소 내 탐색 가드

구성 요소 내 탐색 가드는 beforeRouteEnter 및 beforeRouteLeave라는 두 가지 기능을 사용하여 라우팅 제어를 구현합니다.

1. beforeRouteEnter(to, from, next)

이 함수는 구성 요소가 인스턴스화되기 전에 실행됩니다.

• to: 점프하려는 라우팅 개체
• from: 해당 경로 현재 점프 중인 객체
• next: 경로 점프 제어에 사용되는 콜백 함수

beforeRouteEnter 함수에서는 컴포넌트가 인스턴스화되지 않았기 때문에 이 객체에 직접 접근할 수 없으므로 콜백을 전달하려면 next 메소드를 사용해야 합니다. 함수. 구성 요소가 인스턴스화된 후에 실행됩니다.

예를 들어 다음 함수를 사용하여 동적 경로를 만들 수 있습니다.

{
  path: '/user/:id',
  component: User,
  beforeEnter: (to, from, next) => {
    api.getUser(to.params.id)
      .then(user => {
        to.meta.user = user
        next()
      })
      .catch(error => {
        next('/error')
      })
  }
}

2. beforeRouteLeave(to, from, next)

이 함수는 구성 요소가 떠나기 전에 실행되며 세 가지 매개 변수를 받습니다.

• to: 점프할 라우팅 개체
• from: 현재 점프 중인 라우팅 개체
• next: 경로 점프를 제어하는 ​​데 사용되는 콜백 함수

beforeRouteLeave 함수에서는 다음과 같은 현재 구성 요소를 처리할 수 있습니다. 데이터를 저장하거나 사용자에게 기다리라는 메시지를 표시합니다.

예를 들어 페이지를 떠나기 전에 사용자에게 데이터를 저장할지 여부를 묻는 메시지를 표시할 수 있습니다.

beforeRouteLeave(to, from, next) {
  if (this.formDirty) {
    if (confirm('您是否要保存数据？')) {
      this.saveData()
      next()
    } else {
      next(false)
    }
  } else {
    next()
  }
}

구성 요소 내에서 탐색 가드를 사용할 때 여러 가드가 실행되면 다음 메서드를 사용하여 제어해야 합니다. 실행 순서.

요약하자면, 라우팅 내비게이션 가드는 Vue의 매우 중요한 부분으로, 라우팅을 유연하게 제어하는 ​​데 도움이 됩니다. 실제 개발에서는 라우팅을 정교하게 제어하고 사용자 경험을 향상시키기 위해 비즈니스 요구 사항에 따라 라우팅 탐색 가드를 사용하는 적절한 방법을 선택해야 합니다.

위 내용은 Vue에서 경로 탐색 가드를 사용하여 경로 점프를 제어하는 ​​방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!