vue-router 란 무엇입니까?

vue-router를 배우려면 먼저 여기서 라우팅이 무엇인지 알아야 겠죠? 왜 이전처럼 태그를 사용하여 링크를 직접 작성할 수 없나요? vue-router를 어떻게 사용하나요? 일반적인 라우팅 작업은 무엇입니까? 이러한 질문을 기다리는 것이 이 기사에서 논의할 주요 질문입니다

vue-router가 무엇인가요

여기서의 라우팅은 우리가 일반적으로 부르는 하드웨어 라우터를 의미하지 않으며 여기의 라우팅은 SPA(Single Page)입니다. 응용 프로그램) ) 경로 관리자. 보다 일반적으로 말하면 vue-router는 WebApp의 링크 경로 관리 시스템입니다.
vue-router는 Vue.js의 공식 라우팅 플러그인으로 vue.js와 긴밀하게 통합되어 있으며 단일 페이지 애플리케이션을 구축하는 데 적합합니다. Vue의 단일 페이지 애플리케이션은 라우팅 및 구성 요소를 기반으로 합니다. 라우팅은 액세스 경로를 설정하고 경로 및 구성 요소를 매핑하는 데 사용됩니다. 기존 페이지 애플리케이션은 일부 하이퍼링크를 사용하여 페이지 전환 및 점프를 수행합니다. vue-router 단일 페이지 애플리케이션에서는 경로 간 전환, 즉 구성 요소 전환이 이루어집니다. 라우팅 모듈의 핵심은 URL과 페이지 간의 매핑 관계를 설정하는 것입니다.
a 태그를 사용할 수 없는 이유는 Vue를 사용하는 모든 것이 단일 페이지 애플리케이션이기 때문입니다. 이는 기본 index.html 페이지가 하나만 있는 것과 동일하므로

vue-router 구현 원칙

SPA(단일 페이지 애플리케이션): 단일 페이지 애플리케이션에는 전체 페이지가 하나만 있습니다. 페이지를 로드할 때 전체 페이지를 로드하지 않고 지정된 컨테이너 콘텐츠만 업데이트합니다. 단일 페이지 애플리케이션(SPA)의 핵심 중 하나는 페이지를 다시 요청하지 않고 뷰를 업데이트하는 것입니다. vue-router는 단일 페이지 프런트엔드 라우팅을 구현할 때 해시 모드와 기록 모드

1를 제공합니다. 모드:

vue-router 기본 해시 모드 - URL의 해시를 사용하여 전체 URL을 시뮬레이션하므로 URL이 변경되면 페이지가 다시 로드되지 않습니다. 해시(#)는 웹페이지 내 위치를 나타내는 URL의 앵커 포인트입니다. # 뒤의 부분만 변경하면 브라우저는 해당 위치로만 스크롤하고 웹페이지를 다시 로드하지 않습니다. , #은 브라우징을 안내하는 데 사용됩니다. 서버 측에서는 전혀 쓸모가 없으며 동시에 HTTP 요청에는 # 이후의 부분이 변경될 때마다 브라우저의 액세스 기록에 기록이 추가됩니다. . 이전 위치로 돌아가려면 "뒤로" 버튼을 사용하세요. 그러면 해시 모드는 앵커 포인트 값 변경을 통해 지정된 DOM 위치에 다른 데이터를 렌더링합니다.

2. 해시 모드는 URL에 자체 #을 가지므로 보기 흉한 해시를 생성하지 않으려면 라우팅의 기록 모드를 사용하면 됩니다. 라우팅을 구성할 때 "mode: 'history'"만 추가하면 됩니다. 이 모드는 페이지를 다시 로드하지 않고 URL 점프를 완료하기 위해 History.pushState API를 최대한 활용합니다.

위 내용은 vue-router 란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!