>  기사  >  웹 프론트엔드  >  vue.router의 용도는 무엇인가요?

vue.router의 용도는 무엇인가요?

coldplay.xixi
coldplay.xixi원래의
2020-11-25 13:48:099004검색

vue.router는 단일 페이지 애플리케이션 구축을 케이크 조각으로 만들어주는 공식 라우팅 플러그인입니다. Vue의 단일 페이지 애플리케이션은 라우팅 및 구성 요소를 기반으로 합니다. 라우팅은 vue-router 단일 페이지 애플리케이션에서 경로 및 구성 요소를 매핑하는 데 사용되며, 페이지 전환 및 점프를 달성하는 데 사용할 수 있습니다.

vue.router의 용도는 무엇인가요?

【관련 기사 추천: ​​vue.js

vue.router의 기능:

vue-router는 Vue.js의 공식 라우팅 플러그인이며 Vue.js와 긴밀하게 통합되어 있습니다. vue.js - 단일 페이지 애플리케이션 구축에 적합합니다. Vue의 단일 페이지 애플리케이션은 라우팅 및 구성 요소를 기반으로 합니다. 라우팅은 액세스 경로를 설정하고 경로 및 구성 요소를 매핑하는 데 사용됩니다. 기존 페이지 애플리케이션은 일부 하이퍼링크를 사용하여 페이지 전환 및 점프를 구현합니다. vue-router 단일 페이지 애플리케이션에서는 경로 간 전환, 즉 구성 요소 전환이 이루어집니다.

vue-router 구현 원칙

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

1라는 두 가지 방법을 제공합니다. 해시 모드 :

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

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

는 Vue.js의 공식 라우팅 플러그인으로 vue.js와 긴밀하게 통합되어 있으며 단일 페이지 애플리케이션을 구축하는 데 적합하므로 단일 페이지 애플리케이션을 쉽게 구축할 수 있습니다. 포함된 기능은 다음과 같습니다:

vue-router

중첩 라우팅/뷰 테이블
  • 모듈식, 구성요소 기반 라우팅 구성
  • 라우트 매개변수, 쿼리, 와일드카드
  • Vue.js 전환 시스템 기반 전환 효과 보기
  • 세밀한 탐색 제어
  • 자동으로 활성화된 CSS 클래스가 있는 링크
  • HTML5 기록 모드 또는 해시 모드, IE9에서 자동으로 다운그레이드됨
  • 사용자 정의 스크롤 막대 동작
  • vue의 단일 페이지 애플리케이션은 다음과 같습니다. 라우팅 및 구성 요소를 기반으로 합니다. 라우팅은 액세스 경로를 설정하고 경로와 구성 요소를 매핑하는 데 사용됩니다. 기존 페이지 애플리케이션은 일부 하이퍼링크를 사용하여 페이지 전환 및 점프를 수행합니다. vue-router 단일 페이지 애플리케이션에서는 경로 간 전환, 즉 구성 요소 전환이 이루어집니다. 라우팅 모듈의 핵심은 URL과 페이지 간의 매핑 관계를 설정하는 것입니다.

관련 학습 권장 사항:

javascript 학습 튜토리얼

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.