내 Vue 애플리케이션에서 "NavigationDuplicated: 현재 위치에 대한 중복 탐색 방지"라는 vue-router 오류가 발생했습니다. 이를 해결하는 방법은 무엇입니까?

Vue 애플리케이션에서 "NavigationDuplicated: 현재 위치로의 중복 탐색 방지"라는 vue-router 오류가 발생했습니다. 어떻게 해결하나요?

Vue.js는 빠르고 유연한 JavaScript 프레임워크로서 프런트 엔드 애플리케이션 개발에서 점점 더 인기를 얻고 있습니다. Vue Router는 라우팅 관리에 사용되는 Vue.js의 코드 라이브러리입니다. 그러나 때때로 Vue 애플리케이션에서 "NavigationDuplicated" 오류가 발생하면 Vue Router를 사용하는 데 어려움을 겪을 수 있습니다. 이 문서에서는 이 오류를 해결하는 방법을 설명합니다.

Vue Router에서는 동일한 라우팅 경로 간에 여러 번 전환하면 "NavigationDuplicated" 오류가 발생합니다. 예를 들어 사용자가 동일한 탐색 링크를 여러 번 클릭하면 콘솔에 이 오류가 표시됩니다.

오류 메시지는 일반적으로 다음과 같습니다.

"NavigationDuplicated: 현재 위치로의 중복 탐색 방지: "/your-route-path"

이 오류 메시지는 페이지 라우팅 점프가 동일한 URL에서 여러 번 이루어졌음을 알려줍니다. 이 문제의 근본 원인은 Vue Router가 경로의 올바른 탐색을 보장하기 때문입니다. 경로가 동일하고 매개변수가 동일하면 이 경로는 동일한 경로로 간주됩니다. , 우리는 "NavigationDuplicated" 오류를 해결하는 여러 가지 방법을 소개하겠습니다.

방법 1: catch 함수 사용

catch 함수를 사용하여 catch할 수 있는지 확인하기 위해 try-catch 문으로 경로 탐색을 래핑할 수 있습니다.

try {
   await this.$router.push(myRoute)
} catch (err) {
   if(err.name !== 'NavigationDuplicated') {
      throw err
   }
}

이 코드 조각에서는 try-catch 문을 사용하여 경로로 이동하는 코드를 래핑합니다. try 코드 블록에서는 $router를 통해 지정된 경로로 이동합니다. push()는 "NavigationDuplicated" 오류를 발생시킵니다. catch 코드 블록에서 "NavigationDuplicated" 오류인 경우 이 오류가 다시 발생합니다.

물론 이는 문제를 해결하는 한 가지 방법일 뿐입니다.

방법 2: 중복 경로 무시 ​​

Vue Router에는 "ignoreDuplicates"라는 속성이 있습니다. 이를 true로 설정하면 Vue에서 중복 경로를 무시할 수 있습니다.

export default new Router({
   mode: 'history',
   base: process.env.BASE_URL,
   routes,
   ignoreDuplicates: true,
})

이 코드 조각에서는ignoreDuplicates 속성을 true로 설정했습니다. 이는 동일한 경로가 반복적으로 탐색되면 Vue Router가 이를 무시한다는 것을 의미합니다.

이 솔루션은 코드 양을 절약할 수 있지만, 이 방법은 경로 손실이나 기타 문제를 일으킬 수 있으므로 주의해서 사용해야 합니다.

방법 3: Vue 라우터 후크 사용

Vue 라우터에는 사용자 정의 경로 탐색에 사용할 수 있는 몇 가지 수명 주기 후크 기능이 있습니다.

const router = new VueRouter({
      routes: [],
});

router.beforeEach((to, from, next) => {
   if(to.path === from.path) {
      return false;
   }
   next();
});

이 예에서는 경로가 변경될 때 beforeEach 후크 기능을 사용합니다. Vue Router가 새 경로로 이동하는 것을 방지합니다. 이렇게 하면 NavigationDuplicated 오류를 피할 수 있습니다.

라우팅 시 발생하는 "NavigationDuplicated" 오류를 효과적으로 해결할 수 있는 간단하고 우아한 솔루션입니다.

Vue 라우터의 "NavigationDuplicated" 오류는 Vue.js 애플리케이션 개발에서 발생하는 일반적인 오류 중 하나일 수 있음을 알 수 있습니다. 다행히도 우리는 Vue.js 애플리케이션 사용자에게 더 나은 경험을 제공하기 위해 간단하면서도 효과적인 몇 가지 방법으로 이 문제를 해결할 수 있습니다.

위 내용은 내 Vue 애플리케이션에서 "NavigationDuplicated: 현재 위치에 대한 중복 탐색 방지"라는 vue-router 오류가 발생했습니다. 이를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!