vue-router 에서 hash 모드 와 history 모드 의 차이

vue-router 는 두 가지 모드 가 있 습 니 다.
hash 모드
history 모드
1.단일 페이지 적용
단일 페이지 응용
1.html 파일 하나만 있 고 전체 사이트 의 모든 내용 은 이 html 에 있 습 니 다.js 를 통 해 처리 합 니 다.
2.페이지 에서 의 상호작용 은 새로 고침 이 없 을 뿐만 아니 라 페이지 의 점프 도 새로 고침 이 없다.단일 페이지 응용 을 실현 하기 위해=>전후 단 분리+전단 경로.(보 기 를 업데이트 하지만 페이지 를 다시 요청 하지 않 습 니 다)
전단 경로
실현 하 는 것 도 간단 합 니 다.서로 다른 url 경로 와 일치 하여 분석 하고 서로 다른 구성 요 소 를 불 러 온 다음 에 지역 html 내용 을 동적 으로 렌 더 링 하 는 것 입 니 다.
장점.
좋 은 상호작용 체험 을 할 수 있 습 니 다.사용 자 는 페이지 를 새로 고 칠 필요 가 없습니다.페이지 가 유창 하고 좋 은 전후 단 작업 분리 모델 로 서버 의 압력 을 줄 일 수 있 습 니 다.
결점.
SEO 에 불리 합 니 다.처음 불 러 오 는 데 시간 이 많이 걸 립 니 다.
2.hash 모드
원리:onhashchange 사건 입 니 다.window 대상 에서 이 사건 을 감청 할 수 있 습 니 다.
vue-router 기본 값 은 hash 모드 입 니 다.
1.URL 의 hash 를 사용 하여 완전한 URL 을 모 의 합 니 다.
2.URL 이 바 뀌 었 을 때 페이지 를 다시 불 러 오지 않 습 니 다.즉,한 페이지 의 응용 입 니 다.
2.\#뒤의 hash 가 변 하면 브 라 우 저가 서버 에 요청 하지 않 습 니 다.브 라 우 저가 요청 하지 않 으 면 페이지 를 새로 고치 지 않 고 hasChange 이 벤트 를 촉발 합 니 다.hash 값 의 변 화 를 감청 하여 페이지 의 일부 내용 을 업데이트 하 는 작업 을 수행 합 니 다.

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

hash 모드 에 서 는 hashHistory 대상 을 만 들 고 서로 다른 경로 에 접근 할 때 두 가지 일이 발생 합 니 다.
1.HashHistory.push()는 브 라 우 저가 방문 한 역사의 스 택 에 새로운 경 로 를 추가 합 니 다.
2.Hashistory.replace()가 현재 스 택 꼭대기 로 바 뀌 는 경로

3.history 모드
history api 가 도래 함 에 따라 전단 경로 가 진화 하기 시 작 했 습 니 다.앞의 hashchange 는\#뒤의 url 세 션 만 바 꿀 수 있 고 history api 는 전단 에 완전한 자 유 를 주 었 습 니 다.
4.567917.history api 는 두 부분 으로 나 눌 수 있 습 니 다.전환 과 수정
3.1 과거 상태 전환
back,forward,go 세 가지 방법 포함
브 라 우 저의 전진,후퇴,점프 동작 에 대응 합 니 다.
예 를 들 어(구 글)브 라 우 저 는 전진 과 후퇴 만 있 고 점프 가 없다.응,전진 후퇴 에서 마 우 스 를 길 게 누 르 면 현재 창의 역사 기록 이 나 와 서 점프 할 수 있다(점프 가 더 적합 할 수도 있다).

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

3.2 역사 상태 수정
push State,replace State 두 가지 방법 이 포함 되 어 있 습 니 다.
이 두 가지 방법 은 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();

순서
1.pushstate 를 통 해 페이지 의 상 태 를 state 대상 에 저장 합 니 다.
2.페이지 의 url 이 다시 이 url 로 바 뀌 었 을 때 이벤트.state 를 통 해 이 state 대상 을 찾 을 수 있 습 니 다.
3.페이지 상 태 를 복원 할 수 있 습 니 다.
4.이 페이지 상 태 는 바로 페이지 글꼴 색상 입 니 다.스크롤 바 의 위치,읽 기 진도,구성 요소 의 스위치 의 이 페이지 상 태 는 state 에 저장 할 수 있 습 니 다.
3.3 history 모드
hash 와 history 의 차이
history 모드
1.history api 를 통 해 우 리 는 못 생 긴\#를 버 렸 지만 문제 가 있 습 니 다.
2.전진 을 두려워 하지 않 고,후퇴 를 두려워 하지 않 으 며,갱신 을 두려워 합 니 다.f5
--history 모드 는 URL 을 정상적으로 요청 한 백 엔 드 의 URL 과 같이 수정 합 니 다.백 엔 드 에 대응 하 는/user/id 의 경로 가 설정 되 어 있 지 않 으 면 404 오 류 를 되 돌려 줍 니 다.
-따라서 이 실현 은 서버 의 지원 이 필요 하 며 모든 경 로 를 루트 페이지 로 재 설정 해 야 합 니 다.
ash 모드 에서
1.앞의 hashchange,\#뒤의 url 세 션 만 변경 할 수 있 습 니 다.pushstate 에서 설정 한 새 URL 은 현재 URL 과 같은 소스 의 임의의 URL 일 수 있 습 니 다.
2.전단 경 로 는\#의 정 보 를 수정 하고 브 라 우 저가 요청 할 때 가지 고 놀 지 않 기 때문에 문제 가 없습니다.하지만 history 에 서 는 path 를 자 유 롭 게 수정 할 수 있 습 니 다.새로 고침 할 때 서버 에 해당 하 는 응답 이나 자원 이 없 으 면 분 별로 404 를 표시 합 니 다.
총결산
vue-router 에서 hash 모드 와 history 모드 의 차이 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue-router 모드 의 차이 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!