Vue 라우터에 대한 초보자 가이드

이 튜토리얼은 vue 3 및 Vue Router 4를 사용하여 간단한 Pokedex 앱을 구축하여 주요 라우팅 개념을 보여줍니다. 라우터 설정, 처리 경로 매개 변수, 선언 및 프로그래밍 방식 탐색, 중첩 노선 및 404 페이지 구현을 다루게됩니다.

이 자습서는 Node.js 및 Vue Cli와 함께 HTML, CSS, JavaScript 및 Vue.js에 대한 기본적인 친숙 함을 가정합니다. API 통화를 위해 Axios를 활용하겠습니다. 전체 코드는 github에서 사용할 수 있습니다

주요 개념을 다루었습니다 Vue 라우터 설정 :

vue 라우터를 VUE 3 프로젝트에 통합하고 경로를 구성하는 방법을 배우십시오. 경로 매개 변수 :

마스터 마스터 동적 경로 세그먼트를 사용하여 구성 요소간에 데이터를 전달합니다. 내비게이션 :

선언 내비게이션 ( 사용)과 프로그래밍 방식 탐색 (사용 )을 모두 탐색합니다.

중첩 노선 : 보다 복잡한 응용 구조에 대한 중첩 경로를 만드는 방법을 이해하십시오. 404 처리 :

전용 404 페이지를 구현하여 유효하지 않은 URL을 우아하게 처리합니다. 내비게이션 가드 :

간단히 소개 된 내비게이션 흐름을 제어 할 수 있습니다 (예 : 인증을위한).
• 앱 구조 : 우리의 Pokedex 앱에는 3 페이지가 있습니다 포켓몬 목록 :
원래 151 포켓몬 목록을 표시합니다.
• 포켓몬 : 선택한 포켓몬에 대한 기본 세부 사항 (유형, 설명)을 보여줍니다. 포켓몬 세부 사항 : 심층적 인 정보 (진화 체인, 능력, 이동) :param
• <router-link></router-link> 개발 환경 설정 : this.$router.push() 새로운 Vue 3 프로젝트 생성 : (vue 3 선택). 필요한 패키지를 설치하십시오 :
기본 앱이 실행되는지 확인하십시오 ()
• 앱 구축 (단순화 된 단계) :
  구성
  1. : import main.js 및 라우터 생성 : App.vue 및 를 사용하여 경로를 정의하십시오 구성 요소 개발 :
  2. 포켓몬 목록, 개별 포켓몬 및 상세한 포켓몬보기에 대한 구성 요소 생성. Axios를 사용하여 Pokeapi의 데이터를 가져옵니다 내비게이션 구현 : 선언 내비게이션에 를 활용하고 프로그래밍 방식의 탐색의 경우 router/index.js 중첩 경로 추가 : 구조 경로는 여러 매개 변수를 처리하기위한 구조 경로 (예 : Pokémon Name and Id). 404 페이지 생성 : createRouter 유효하지 않은 URL에 대한 "찾을 수없는"페이지를 표시 할 캐치-모든 경로를 구현하십시오. Pokémon Detail Pages를 탐색하기 전에 Navigation Guard를 사용하여 유효한 Pokémon 이름을 확인하십시오. createWebHistory
  추가 탐사 : 이 튜토리얼을 완료 한 후에는 다음을 고려하십시오 :
  3. 경로를 전달하기 위해 소품을 전달합니다 페이지 추가. 성능 향상을 위해 게으른 하중 구현 자주 묻는 질문 (faqs) :
  FAQS 섹션은 VUE 라우터, 설치, 경로 정의, 매개 변수 통과, 404 처리 및 경로 보호에 대한 일반적인 질문에 대한 간결한 답변을 제공합니다. 이 질문들은 튜토리얼 내용의 맥락에서 답변됩니다.

위 내용은 Vue 라우터에 대한 초보자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!