Vue 애플리케이션에서 vue-router를 사용할 때 '오류: 'xxx'는 등록된 경로가 아닙니다.' 문제를 해결하는 방법은 무엇입니까?

PHPz
풀어 주다: 2023-06-24 14:35:59
원래의
1375명이 탐색했습니다.

Vue.js는 대화형의 효율적인 사용자 인터페이스를 구축하기 위한 완전한 개발 도구 세트를 제공하는 경량 JavaScript 프레임워크입니다. Vue Router는 단일 페이지 애플리케이션(SPA)을 구축하고 클라이언트 측 라우팅 제어를 구현하는 데 사용할 수 있는 Vue.js의 공식 라우팅 관리 플러그인입니다. 그런데 Vue Router를 사용할 때 "오류: xxx는 등록된 경로가 아닙니다"라는 오류 메시지가 나타나는 경우가 있습니다. 그렇다면 어떻게 해결해야 할까요?

1. 라우팅 구성을 확인하세요

Vue Router를 사용하려면 먼저 라우팅을 구성해야 합니다. 애플리케이션의 항목 파일에서 Vue.use() 메소드는 일반적으로 Vue Router 플러그인을 설치하고 라우팅 구성 항목을 정의하는 데 사용됩니다. 예:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router
로그인 후 복사

"오류: xxx는 등록된 경로가 아닙니다."라는 오류 메시지가 나타나면 먼저 라우팅 구성 항목에 해당 경로가 존재하는지 확인하세요. 예를 들어, "오류:about은 등록된 경로가 아닙니다."라는 오류 메시지가 나타나면 라우팅 구성 항목에 "about"이라는 경로가 정의되어 있는지 확인해야 합니다.

2. 탐색 링크 확인

Vue 애플리케이션에서 구성 요소는 일반적으로 탐색 링크를 생성하는 데 사용됩니다. 예:

<router-link to="/about">关于我们</router-link>
로그인 후 복사

내비게이션 링크 사용 시 "오류: xxx는 등록된 경로가 아닙니다."라는 오류 메시지가 나타나면 내비게이션 링크의 to 속성이 올바른지, 라우팅 구성에 정의된 경로와 일치하는지 확인해야 합니다. 안건.

3. 경로 점프 로직을 확인하세요

Vue Router에서는 프로그래밍 방식 탐색을 통해 경로를 점프할 수 있습니다. 예: $router.push('/about'). 루트 점프 수행 시 "오류: xxx는 등록된 루트가 아닙니다."라는 오류 메시지가 나타나는 경우, 라우팅 구성 항목에 점프 경로가 존재하는지 확인해야 합니다.

4. 명명된 라우팅 확인

Vue 라우터는 명명된 라우팅을 지원하므로 경로 점프 시 쉽게 사용할 수 있도록 라우팅 구성 항목에서 경로 이름을 설정할 수 있습니다. 예:

{
  path: '/about',
  name: 'about',
  component: About
}
로그인 후 복사

명명된 경로를 사용하여 점프할 때 "오류: xxx는 등록된 경로가 아닙니다."라는 오류 메시지가 나타나는 경우 명명된 경로가 올바른지, 정의된 경로 이름과 일치하는지 확인해야 합니다.

요약

"오류: xxx는 등록된 경로가 아닙니다."라는 오류 메시지는 일반적으로 잘못된 라우팅 구성이나 잘못된 점프 경로로 인해 발생합니다. Vue Router를 사용할 때 라우팅 구성, 탐색 링크 및 라우팅 점프 논리를 주의 깊게 확인하여 라우팅이 제대로 작동하는지 확인해야 합니다.

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿