Vue 애플리케이션에서 vue-router를 사용할 때 '오류: 탐색 가드를 통해 'xxx'에서 'yyy'로 이동할 때 리디렉션됨' 문제를 해결하는 방법은 무엇입니까?

Vue 애플리케이션에서 vue-router를 사용할 때 "오류: 탐색 가드를 통해 "xxx"에서 "yyy"로 이동할 때 리디렉션됨" 문제를 해결하는 방법은 무엇입니까?

Vue는 대화형 웹 애플리케이션을 더 쉽게 구축할 수 있게 해주는 인기 있는 JavaScript 프레임워크입니다. Vue Router는 Vue 애플리케이션에서 탐색 및 라우팅을 처리하는 핵심 플러그인입니다. 그러나 vue-router를 사용할 때 "오류: 탐색 가드를 통해 "xxx"에서 "yyy"로 이동할 때 리디렉션되었습니다."라는 일반적인 오류가 발생하는 경우가 있습니다. 이 오류는 초보자를 매우 혼란스럽게 만듭니다. 그래서 이번 글에서는 이 오류의 원인과 해결 방법을 소개하겠습니다.

오류 원인

vue-router를 사용할 때 특정 페이지에 액세스할 때 사용자의 권한을 제어하기 위해 라우팅 가드를 사용하는 경우가 많습니다. 예를 들어, 경로 가드를 사용하여 사용자가 로그인하지 않은 경우 로그인 페이지로 리디렉션할 수 있습니다. 그런데 Route Guard를 사용하다 보면 다음과 같은 오류가 가끔 발생합니다.

Error: Redirected when going from "xxx" to "yyy" via a navigation guard

이 오류가 발생하는 이유는 beforeEach() 메소드를 사용하여 사용자를 리디렉션했지만 "redirect" 상황 처리를 제대로 처리하지 못했기 때문입니다. 사용자를 리디렉션하는 경우 Vue Router에 이 사실을 알려야 합니다. 그렇지 않으면 Vue Router는 우리가 리디렉션하지 않았다고 생각할 것입니다.

해결 방법

이 오류를 해결하려면 경로 가드 사용 방식을 적절하게 수정해야 합니다. 가능한 해결 방법은 다음과 같습니다.

1. Next(false) 사용

next(false)를 사용하면 리디렉션 없이 경로를 종료한다는 뜻입니다. 따라서 beforeEach()에서 next(false)를 사용하면 이 오류를 피할 수 있습니다.

예를 들어 다음과 같이 경로 가드를 수정할 수 있습니다:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login') //重定向到登录页
  } else {
    next(false) //终止路由
  }
})

2. Next({ path: '/login' })

next({ path: '/login' })를 사용할 때 이는 다음을 의미합니다. 우리는 사용자를 지정된 경로(여기서는 /login)로 리디렉션하려고 합니다. 이런 식으로 Vue Router는 우리가 리디렉션되었음을 알고 있습니다.

예를 들어 다음과 같이 경로 가드를 수정할 수 있습니다:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ path: '/login' }) //重定向到登录页
  } else {
    next() //正常路由
  }
})

3. Next({ name: 'login' })

next({ name: 'login' })를 사용하면 사용자를 지정된 이름의 경로로 리디렉션하고 싶습니다. 이 이름은 Vue Router에 정의된 경로 이름입니다.

예를 들어, "login"이라는 이름의 경로를 다음과 같이 정의할 수 있습니다:

const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  }
]

그런 다음 경로 가드를 다음과 같이 수정할 수 있습니다:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'login' }) //重定向到具有名称“login”的路由
  } else {
    next() //正常路由
  }
})

Summary

Vue Router를 사용할 때, 다음과 같이 하는 방법을 이해해야 합니다. 경로 가드를 사용하면 사용자 액세스 권한을 제어하고 사용자를 지정된 페이지로 리디렉션하는 데 도움이 됩니다. 그러나 루트 가드를 사용하는 경우 "오류: 네비게이션 가드를 통해 "xxx"에서 "yyy"로 이동할 때 리디렉션되었습니다"라는 오류가 발생하는 경우가 있습니다. 이때 next(false), next({ path: '/login' }), next({ name: 'login' }) 등을 사용하는 등 라우팅 가드 사용 방식을 적절하게 수정해야 합니다. 등을 사용하므로 이 오류를 피할 수 있습니다.

위 내용은 Vue 애플리케이션에서 vue-router를 사용할 때 '오류: 탐색 가드를 통해 'xxx'에서 'yyy'로 이동할 때 리디렉션됨' 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!