vue-router 라우팅 모드

vue-router에는 세 가지 루트 모드가 있는데 그것이 바로hash,history,abstract이다.

switch (mode) {
  case 'history':
	this.history = new HTML5History(this, options.base)
	break
  case 'hash':
	this.history = new HashHistory(this, options.base, this.fallback)
	break
  case 'abstract':
	this.history = new AbstractHistory(this, options.base)
	break
  default:
	if (process.env.NODE_ENV !== 'production') {
	  assert(false, `invalid mode: ${mode}`)
	}
}

설명은 다음과 같습니다.

hash: URL hash 값을 라우팅에 사용합니다.HTML5 History Api를 지원하지 않는 브라우저를 포함하여 모든 브라우저를 지원합니다.

hash 모드 배후의 원리는 onhashchange 사건으로 window 대상에서 이 사건을 감청할 수 있다.

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

위의 코드는hash를 바꾸어 페이지의 글씨체 색깔을 바꿀 수 있는데 별 소용이 없지만 어느 정도 원리를 설명했다.
더 중요한 것은hash가 변화하는 URL이 브라우저에 기록되기 때문에 브라우저의 전진과 후퇴를 모두 사용할 수 있다는 것을 발견할 수 있다. 또한 후퇴를 클릭하면 페이지의 글씨체 색깔도 변화한다. 즉, 브라우저의 전진, 후퇴를 통해 페이지가 모두 변화할 수 있다는 것이다.이렇게 되면 브라우저가 서버를 요청하지 않았음에도 불구하고 페이지 상태와 URL이 일일이 연결되어 나중에 사람들은 그에게 패기있는 이름을 전방 루트라고 지어 한 페이지 응용 프로그램의 표준이 되었다.
예:

    
    


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

history: HTML5 History API와 서버 구성에 의존합니다.

 
history api가 도래함에 따라 전방 루트가 진화하기 시작했다. 앞의hashchange는 # 뒤의 URL 부분만 바꿀 수 있고, history api는 전방에 완전한 자유를 주었다.
history api는 두 부분으로 나눌 수 있습니다: 전환과 수정
(1) 전환 내역 상태back、forward, go 세 가지 방법을 포함하여 브라우저의 전진, 후퇴, 점프 조작에 대응한다. 어떤 학우가 말하기를 (구글) 브라우저는 전진과 후퇴만 있고 점프가 없다. 응, 전진 후퇴에서 마우스를 길게 누르면 모든 현재 창의 역사 기록이 나와서 점프를 할 수 있다(점프가 더 적합할지도 모른다).

history.go(-2);//    
history.go(2);//    
history.back(); //  
hsitory.forward(); //  

(2) 역사 상태 수정pushState、replaceState 두 가지 방법을 포함하고 이 두 가지 방법은 세 가지 파라미터를 수신한다: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를 통해 페이지의 상태를state 대상에 저장하고 페이지의 URL이 다시 이 URL으로 바뀔 때 이벤트를 통해state는 이state 대상을 추출하여 페이지 상태를 복원할 수 있습니다. 이곳의 페이지 상태는 바로 페이지 글씨체 색입니다. 사실 스크롤 바의 위치, 읽기 진도, 구성 요소의 스위치의 페이지 상태는state에 저장할 수 있습니다.
History api를 통해 우리는 못생긴 #을 잃어버렸지만 그것도 흠이 있다.
전진도 후퇴도 두렵지 않고 리셋도 두렵습니다. f5, (백엔드가 준비되지 않으면) 리셋은 서버에 실질적으로 요청하는 것이기 때문입니다.
hash 모드에서 전방 루트는 #의 정보를 수정하고 브라우저가 요청할 때 가지고 놀지 않기 때문에 문제가 없습니다.그러나history에서 path를 자유롭게 수정할 수 있습니다. 리셋할 때 서버에 해당하는 응답이나 자원이 없으면 분당 404가 갱신됩니다.
(3) popstate는history 루트 차단을 실현하고 페이지 반환 이벤트를 감청합니다
활동 기록 항목이 변경되면 popstate 이벤트를 터치합니다.
1、활성화된 역사 기록 항목이history를 통과하는 경우.pushState () 의 호출로 만들어졌거나,history에 대한 호출을 받았습니다.popstate 이벤트의state 속성은 역사 항목의 상태 대상의 복사본을 포함합니다.
2、주의해야 할 것은history를 호출하는 것이다.pushState() 또는 history.replace State () 는 탐색 역사에 기록을 추가하거나 수정하는 데 사용되며 popstate 이벤트를 터치하지 않습니다.
브라우저 동작을 할 때만 이 이벤트를 터치합니다. 예를 들어 사용자가 브라우저의 리셋 단추를 누르거나 (자바스크립트 코드에서history.back ()
예:

    
    


    
    
    
        if (window.history && window.history.pushState) {
           window.onpopstate = function(event) {
              console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
              //window.history.go(1)
              //window.history.back()
           };
         
           //window.addEventListener("popstate", function(e) {
           //   window.location = 'http://www.baidu.com';
           //}, false);
         
           !function() {
              var state = {
                 title: "title",
                 url: "#"
              };
              window.history.pushState(state, "title", "#");
           }();
        }
    

새로 고칠 때 인쇄하지 않고, 여러 번 새로 고침하고, 다시 뒤로 물러서며, 매번 null이 될 때까지
 

abstract: Node와 같은 모든 JavaScript 실행 환경을 지원합니다.js 서버 사이드.브라우저가 없는 API가 발견되면 라우트는 자동으로 이 모드로 강제로 들어갑니다.