Vue 애플리케이션에서 vue-router를 사용할 때 'NavigationDuplicated: 현재 위치로의 중복 탐색 방지' 문제를 해결하는 방법은 무엇입니까?

Vue.js는 널리 사용되는 JavaScript 프레임워크입니다. 단일 페이지 웹 애플리케이션을 구축하는 데 필요한 많은 기능과 도구를 제공합니다. Vue-router는 Vue.js에서 일반적으로 사용되는 라우팅 관리 도구입니다. SPA(단일 페이지 애플리케이션)에서 라우팅을 구현하는 데 도움이 됩니다.

그러나 vue-router를 사용할 때 "NavigationDuplicated: 회피됨 중복 탐색을 현재 위치로" 오류가 발생할 수 있습니다. 이 문제는 일반적으로 사용자가 라우팅 경로를 반복적으로 클릭할 때 발생합니다. 이 경우 vue-router는 "현재 위치에 대한 반복적인 접근을 피하십시오"라는 메시지를 표시합니다.

이 오류는 왜 발생하나요? 이는 vue-router가 사용자가 동일한 주소에 반복적으로 액세스하여 페이지 구성 요소를 로드하는 동안 문제를 일으킬 수 있음을 감지하기 때문입니다. 따라서 vue-router의 탐색 가드는 반복 탐색을 피하기 위해 페이지 로딩을 중지합니다.

그렇다면 이 문제를 어떻게 해결해야 할까요?

1. 네비게이션 가드 비활성화

첫 번째 방법은 vue-router에서 네비게이션 가드를 비활성화하는 것입니다. 내비게이션 가드는 다양한 경로 간을 전환하고 경로 상태, 권한 등을 관리하는 데 도움이 되는 매우 강력한 기능이므로 이 접근 방식은 경로 관리 방식을 깨뜨릴 수 있습니다. 그러나 일부 시나리오에서는 탐색 가드를 비활성화하는 것이 문제를 해결하는 효과적인 방법이 될 수 있습니다.

내비게이션 가드를 비활성화하려면 라우팅 구성에서 이를 제거하면 됩니다.

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact },
  ],
  mode: 'history',
  base: process.env.BASE_URL,
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

2. 솔루션

두 번째 방법은 네비게이션 가드의 기능을 유지하면서 이 문제를 해결하는 것입니다. 두 가지 해결 방법이 있습니다.

1. catch 메소드를 사용하세요.

catch 메소드는 네비게이션 가드 실행 중에 오류가 발생하면 catch 메소드가 호출됩니다. 현재 페이지로 돌아가는 것을 방지하기 위해 catch 메소드에서 거짓 값을 반환할 수 있습니다.

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

이렇게 하면 사용자가 동일한 주소를 반복해서 방문하는 경우 반복 탐색을 피할 수 있습니다.

2. 교체 방법을 사용하세요

교체 방법이 더 나은 솔루션입니다. 이 방법은 네비게이션 가드를 트리거하지 않고 동일한 주소로 리디렉션할 수 있습니다. 반복적인 탐색을 피하기 위해 경로의 점프 메소드에서 교체 메소드만 사용하면 됩니다.

this.$router.replace(to)

이렇게 하면 사용자가 동일한 경로로 이동하기 위해 클릭할 때마다 중복된 구성 요소를 로드하지 않고 현재 경로가 새 경로로 대체됩니다. 이는 내비게이션 가드의 문제를 방지합니다.

Vue 애플리케이션에서 vue-router를 사용할 때 "NavigationDuplicated: 현재 위치로의 중복 탐색 방지" 오류는 매우 일반적인 문제입니다. 필요에 따라 탐색 가드를 비활성화하거나 catch 메서드를 사용하거나 교체 메서드를 사용하여 이 문제를 해결하도록 선택할 수 있습니다.

위 내용은 Vue 애플리케이션에서 vue-router를 사용할 때 'NavigationDuplicated: 현재 위치로의 중복 탐색 방지' 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!