Vue-Router의 해시 모드와 히스토리 모드의 차이점 분석

이 글은 vue-router의 해시 모드와 히스토리 모드의 차이점에 대한 분석을 공유합니다. 내용이 매우 좋습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

우리 모두 알고 있듯이 vue-router에는 해시 모드와 히스토리 모드의 두 가지 모드가 있습니다.

hash 모드

해시 모드의 원리는 onhashchange 이벤트이며, 이는 창 개체에서 들을 수 있습니다.

#🎜 🎜#

window.onhashchange = function(event){
  console.log(event.oldURL, event.newURL);
  let hash = location.hash.slice(1);
  document.body.style.color = hash;
}

위 코드는 해시를 변경하여 페이지 글꼴 색상을 변경할 수 있습니다. 쓸모는 없지만 어느 정도 원리를 보여줍니다.

더 중요한 점은 URL 변경의 해시가 브라우저에 의해 기록되기 때문에 브라우저의 앞으로 및 뒤로를 사용할 수 있으며 뒤로 클릭하면 페이지 글꼴이 표시된다는 점입니다. 색상도 변경됩니다. 이런 식으로 브라우저가 서버에 요청하지 않았음에도 불구하고 페이지 상태가 URL과 하나씩 연결되어 나중에 사람들은 이를 프런트엔드 라우팅이라는 거창한 이름을 붙여 단일 페이지 애플리케이션의 표준 구성이 되었습니다. .

NetEase Cloud Music 및 Baidu Netdisk는 다음과 같은 해시 라우팅을 사용합니다.

http://music.163 .com/# /friend

https://pan.baidu.com/disk/home#list/vmode=list

historyrouting

#🎜🎜 #도착과 함께 이전 hashchange의 경우 # 다음 URL 조각만 변경할 수 있었지만, History API는 프런트엔드에 완전한 자유를 제공합니다

# 🎜🎜#

history API는 전환과 수정의 두 부분으로 나눌 수 있습니다. MDN

전환 기록 상태

를 참조하세요. 브라우저의 앞으로, 뒤로, 점프 동작에 해당하는 뒤로, 앞으로, 이동의 세 가지 방법이 포함되어 있습니다. 일부 학생들은 (구글) 브라우저에는 앞으로 및 뒤로만 있고 점프가 없다고 말했습니다. . 음, 앞으로 및 뒤로 마우스를 길게 누르면 현재 모든 창의 기록이 나타나고 점프할 수 있습니다(좀 더 적절하게는 점프라고 함).

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

# 🎜🎜#

#🎜🎜 #

기록 상태 수정

Include 두 가지 메소드, pushState 및 replacementState 이 두 가지 메소드는 stateObj, title, url이라는 세 가지 매개변수를 받습니다.

#🎜🎜 #

history.pushState({color:'red'}, 'red', 'red'})
window.onpopstate = function(event){
  console.log(event.state)
  if(event.state && event.state.color === 'red'){
    document.body.style.color = 'red';
  }
}
history.back();
history.forward();

pushstate를 통해 페이지의 상태를 상태 개체에 저장합니다. 페이지의 URL이 다시 이 URL로 변경되면, event.state 객체를 통해 이 상태를 얻을 수 있으므로 페이지 상태를 복원할 수 있습니다. 여기서 페이지 상태는 실제로 페이지 글꼴 색상이며, 스크롤 막대의 위치, 읽기 진행률 및 구성 요소의 전환입니다. 모두 상태에 저장할 수 있습니다.

히스토리 모드에서 무엇이 두려운가요? 🎜🎜# 앞으로 또는 뒤로 이동하는 것을 두려워하지 말고 새로 고침을 두려워하십시오, f5, (백엔드가 준비되지 않은 경우) ), 새로 고침은 가상이 아닌 서버에 대한 실제 요청이기 때문입니다.

해시 모드에서는 프런트 엔드 라우팅이 #에 있는 정보를 수정하지만, 요청 시 브라우저는 이를 가지고 놀지 않으므로 문제가 없습니다. 하지만 히스토리에서는 경로를 자유롭게 수정할 수 있습니다. , 새로고침 시 서버에 해당 응답이나 리소스가 없으면 1분마다 404가 표시됩니다.

그래서 github.io에 단일 페이지 블로그를 구축하려면 해시 모드를 선택해야 합니다.

관련 권장 사항:

vue에서 토큰을 새로 고치는 방법

# 🎜🎜#

Vue의 SFC 및 vue-loader에 대한 자세한 분석

# 🎜🎜#

위 내용은 Vue-Router의 해시 모드와 히스토리 모드의 차이점 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!