vue-router 점프 원리

vue-router 루트의 원리는 사이트 주소를 바꾸어 페이지의 부분적인 리셋을 실현하는 것이다. a탭의 리셋에 비해 다른 점은 루트 리셋이 전체 페이지를 리셋할 필요가 없다는 것이다.
대략적인 절차는 다음과 같다.
　　1. 브라우저 요청
　　2.서버가 포트를 감청하고 URL 경로를 분석합니다
　　3.서버의 루트 설정에 따라 해당하는 정보를 되돌려줍니다. (HTML 문자열, json 데이터, 그림 등등)
　　4.브라우저는 패키지의 Content-type에 따라 데이터를 분석하는 방법을 결정합니다
간단하게 말하면 루트는 백엔드 서버와 상호작용을 하는 방식이다. 서로 다른 경로를 통해 서로 다른 자원을 요청하고 서로 다른 페이지를 요청하는 것은 루트의 한 기능이다.
 
프런트엔드 라우팅
hash 모드
aax가 유행함에 따라 비동기 데이터 요청은 브라우저를 새로 고치지 않은 상태에서 상호작용으로 실행됩니다.비동기적인 상호작용 체험의 고급 버전은 SPA - 단일 페이지 응용이다.한 페이지 응용은 페이지의 상호작용이 새로고침이 없는 것이 아니라 페이지의 회전도 새로고침이 없는 것이다. 한 페이지 응용을 실현하기 위해 전단 루트가 생겼다.
서비스 사이드 루트와 유사하게 전단 루트는 실현되기 때문에 사실 매우 간단하다. 바로 서로 다른 URL 경로와 일치하여 해석한 다음에 동적으로 지역 html 내용을 과장하는 것이다.그러나 이렇게 문제가 존재한다. 바로 URL이 바뀔 때마다 페이지의 리셋을 일으킨다는 것이다.그 문제를 해결하는 사고방식은 바로 URL을 바꾸는 상황에서 페이지의 갱신을 보장하는 것이다.2014년까지 여러분은hash를 통해 루트를 실현했습니다. urlhash는 다음과 같습니다.

http://www.xxx.com/#login

이런 #.뒤hash값의 변화는 브라우저가 서버에 요청을 하지 않고 브라우저가 요청을 하지 않으면 페이지를 새로 고치지 않습니다.또한 매번hash값의 변화는 hashchange 이 사건을 촉발할 수 있다. 이 사건을 통해 우리는 hash값에 어떤 변화가 발생했는지 알 수 있다.그리고 우리는 감청 hashchange 을 통해 페이지 부분의 내용을 업데이트하는 작업을 실현할 수 있다.

function matchAndUpdate () {
  // todo   hash  dom    
}
window.addEventListener('hashchange',matchAndUpdate )
// addEventListener()  。

 
Hash 방법은 라우팅에 하나#가 포함되어 있으며 주요 원리는 감청# 후 URL 경로 식별자의 변경으로 촉발된 브라우저hashchange 이벤트를 통해 현재 경로 식별자를 얻은 다음 라우팅 점프 작업을 수행하는 것입니다. MDN 참조

location.hash: 전체 URL로 돌아가기

location.href: URL의 앵커 섹션으로 돌아가기

location.hash: URL 경로 이름 반환

location.pathname사건: hashchange변경이 발생하면 이 사건

을 촉발합니다
예를 들어 하나의 경로에 접근하다location.hash 위의 값은 다음과 같습니다.

# http://sherlocked93.club/base/#/page1
{
  "href": "http://sherlocked93.club/base/#/page1",
  "pathname": "/base/",
  "hash": "#/page1"
}

주의:Hash 방법은 페이지의 닻점에 해당하는 기능을 이용하여 원래의 닻점 포지셔닝을 통해 페이지의 스크롤 포지셔닝을 하는 방식과 충돌하여 잘못된 루트 경로로 포지셔닝을 하기 때문에 다른 방법을 사용해야 합니다. 이전에progress-catalog라는 플러그인이 이 상황에 부딪혔습니다.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
다음으로 전송:https://www.cnblogs.com/maxiag/p/11207461.html