Vue 라우팅 모드는 무엇입니까?

Vue 라우팅 모드에는 다음이 포함됩니다. 1. URL의 해시 값을 경로로 사용하고 모든 브라우저를 지원하는 해시 모드는 URL 경로에 나타납니다. 2. HTML5 API(이전 브라우저에서는 지원되지 않음) 및 HTTP 서버 구성을 사용하는 기록 모드. 배경 구성이 없으면 페이지를 새로 고칠 때 404가 나타납니다. 3. 없는 경우 모든 JavaScript 환경에 적용 가능한 추상 모드입니다. 브라우저 API를 사용하면 라우터가 자동으로 이 모드로 강제 전환됩니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

라우팅 모드 분석

여기서 vue-router의 라우팅 모드에 대해 가장 먼저 이해해야 할 것은 라우팅이 여러 URL로 구성되어 그에 따라 다른 위치로 이동할 수 있다는 것입니다. 서버 개발을 해보셨거나 http 프로토콜에 대해 어느 정도 이해하고 계시다면, 브라우저에서 해당 페이지에 대한 접근이 Stateless하다는 것을 아실 것입니다. 따라서 다른 페이지로 전환할 때 다시 요청해 드리겠습니다. 실제로 vue와 vue-router를 사용하여 개발한다면 페이지를 전환할 때 페이지를 다시 요청하거나 새로 고치는 일이 없다는 것을 이해하게 될 것입니다. 페이지가 상태 저장되어 있는 것처럼 보이는 이유는 무엇입니까? 이는 실제로 브라우저의 History API를 통해 달성됩니다. 이를 통해 페이지를 새로 고치지 않고 이동할 수 있으며 페이지 상태가 브라우저에서 유지됩니다.

1. 해시 모드

URL의 해시를 사용하여 완전한 URL을 시뮬레이션하므로 URL이 변경되면 페이지가 다시 로드되지 않고 표시된 네트워크 경로에 "#" 기호가 표시됩니다. 조금 추악합니다. 이는 모든 브라우저 및 서버와 호환되므로 가장 안전한 모드입니다.

1- 기능: 해시 모드 URL 주소에 '#'가 있습니다#'

 <a href=&#39;#/aaa&#39;>1(#/aaa)</a>

其中#/aaa就是我们的hash值,并且hash值并不会传给服务器

2-实现的原理：

原生的hashChange事件，主要是通过事件监听hash值得变化 window.onHashChange=function(){}

3-刷新页面：

不会不发生请求，页面不会有任何问题，不需要后端配合

而且hash模式的兼容性比较好.不过他因为带有'#'所以他的美观行没有history 模式好。

二、history模式

美化后的hash模式，会去掉路径中的 “#

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

여기서 #/aaa는 해시 값이며 해시 값은 서버로 전달되지 않습니다

2-구현 원칙:

네이티브 hashChange 이벤트는 주로 window.onHashChange=function(){}3-페이지 새로 고침:

이벤트를 통해 해시 값 변경을 모니터링합니다. 아니요 요청도 없고 페이지에 문제도 없으며 백엔드 협력도 필요하지 않습니다

. 해시 모드는 호환성이 더 좋습니다. 하지만 '#'이 포함되어 있기 때문에 아름다운 행이 좋지 않습니다. 히스토리 모드로.

2. 기록 모드

미화된 해시 모드는 경로에서 "#"를 제거합니다. Html5의 역사와 pushState API에 의존하므로 IE9 이상 버전에 대해 걱정할 필요가 없습니다. 또한 브라우저의 앞으로, 뒤로 및 점프 작업에 해당하는 뒤로, 앞으로, 이동의 세 가지 메서드도 포함되어 있습니다. 브라우저의 왼쪽 상단에 있는 앞으로 및 뒤로 버튼으로 수행되는 작업입니다. [학습 영상 공유:

vue 영상 튜토리얼

,

웹 프론트엔드 영상

]

const router = new VueRouter({routes, mode:'hash|history|abstract',})

하지만 역사에도 단점이 있습니다. 앞으로 점프하고 뒤로 점프하는 것을 두려워하지 않지만, 새로고침을 두려워합니다(백엔드가 그렇지 않은 경우). 준비), 새로 고침이 실제이기 때문에 로컬로 서버를 요청하십시오.

요약하자면

🎜1: 해시 모드(vue-router 기본 모드 URL 뒤에 #이 옴)는 URL의 해시 값을 경로로 사용하고 모든 브라우저를 지원합니다. 단점: 다음의 #만 변경할 수 있습니다. 라우팅 점프를 구현합니다. 🎜 2: 히스토리 모드(모드를 통해 히스토리 모드로 변경: 'history') HTML5(BOM) 히스토리 API 및 서버 구성 단점: 새로 고침에 대한 두려움 백엔드가 이 상황을 처리하지 않으면 프런트 엔드 새로 고침이 실제로 요청합니다. 서버 시간도 많이 걸리고 속도도 매우 느립니다. 🎜🎜🎜🎜3. Abstract 모드는 vue 라우팅의 세 번째 모드입니다. 해시 모드와 히스토리 모드 모두 브라우저에 영향을 미칩니다. 일반적으로 달성하려는 기능은 현재 페이지의 라우팅 경로를 브라우저에 계속 표시하면서 기존 라우팅 페이지에 다른 라우팅 페이지를 포함하는 것입니다. 이는 라우팅 모드와 분리되어 있습니다. 🎜🎜Node.js를 사용하는 서버사이드 등 모든 JavaScript 환경에 적용됩니다. 브라우저 API가 없으면 라우터는 자동으로 이 모드로 강제 전환됩니다. 🎜🎜그럼 여기로 전환하세요 🎜rrreee🎜. 🎜🎜 (학습 영상 공유: 🎜웹 프론트엔드 개발🎜, 🎜기본 프로그래밍 영상🎜)🎜

위 내용은 Vue 라우팅 모드는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!