hashhistory 프론트엔드 인터뷰에서 매우 흔한 질문입니다. 많은 사람들이 히스토리와 해시에 대해 다른 이해를 가지고 있을 수 있습니다. 두 사람의 URL 필드에는 # 기호가 없고 다른 하나는 # 기호가 있습니다. 하지만 이것이 왜 그런지 생각해 본 적이 있습니까 ? #이 있는 것과 없는 것의 차이점은 무엇입니까?이 기사에서는 프런트 엔드 라우팅 기록 및 해시에 대한 나의 이해에 대해 설명합니다.
hash 둘 다 history 프런트 엔드 및 백 엔드 분리 프로젝트에서 사용할 수 있으며 둘 다 고유한 특성과 사용 시나리오가 있습니다.
1. 프런트엔드 라우팅 원칙
1、스파
SPA는 Single Page Application 의 약자입니다 . 소위 단일 페이지 Web응용 프로그램은 한 페이지만 있는 응용 프로그램입니다 Web.오래전과 달리 프런트 엔드 상호 작용은 여러 페이지로 건너뛰는 것입니다.각 페이지는 상대적으로 독립적으로 존재합니다.단일 페이지 응용 프로그램은 하나의 페이지로 이동하는 것입니다. 페이지의 렌더링된 콘텐츠를 동적으로 변경합니다. 단일 페이지 애플리케이션(SPA)은 단일 HTML페이지를 로드하고 사용자가 애플리케이션과 상호작용할 때 해당 페이지를 동적으로 업데이트하는 Web애플리케이션 입니다. 브라우저는 처음에 필요한 HTML, CSS및 를 로드 JavaScript하고 모든 작업은 JavaScript에 의해 .
Web오늘날 단일 페이지 애플리케이션의 급속한 발전 에 대처하기 위해 다양한 프런트 엔드 구성 요소 기술 스택이 끝없이 등장합니다. 최근 몇 년 동안 지속적인 버전 반복을 통해 두 가지 주요 기술 스택 vue과 react두 가지 기술 스택이 전면에 등장하여 현재 가장 인기 있는 두 가지 기술 스택이 되었습니다.
2. 라우팅은 언제 필요합니까?
현재 중국에서 사용되는 대부분의 프레임워크는 Vue이며 Vue는 단일 페이지 애플리케이션 개발의 형태를 계승합니다. 그리고 vue-router의 라우팅 표준 vue구성이며 두 가지 모드 가 vue-router있습니다 .hashhistory
다음은 이 두 가지 모드를 하나씩 설명합니다.
2. 해시 모드
1. 정의
hash 모드는 프런트 엔드 경로의 경로가 # 실제 경로 뒤에 해시 마크로 연결되는 url 모드 입니다. 파운드 기호 뒤의 경로가 # 변경되면 브라우저는 요청을 다시 시작하지 않고 onhashchange 이벤트를 트리거합니다.
예: http://127.0.0.1:8001/01-hash.html?a=100&b=20#/aaa/bbb
2. 해시의 특징
-
해시 변경은 웹 페이지 점프, 즉 브라우저의 앞뒤로 이동합니다.
-
hash변경할 수 있지만url페이지 다시 로드를 트리거하지 않습니다(해시 변경이 에 기록됨window.history). 즉, 페이지가 새로 고쳐지지 않습니다. 즉, 모든 페이지 이동은 클라이언트 측에서 수행됩니다. 따라서 이것은http요청으로 간주되지 않으므로 이 모드는 최적화에 도움이 되지 않습니다SEO.hash이후 부분 만 수정할 수 있으므로 현재 문서와 동일한 문서#로만 이동할 수 있습니다 .urlurl -
hash를 통해 의 변경 사항을window.onhashchange모니터링하여hash새로 고침 없는 점프 기능을 실현합니다. -
hash절대 끝까지 제출하지 않습니다server(전단에서만 살고 죽는 것으로 이해할 수 있습니다).
3. 히스토리 모드
1. 정의
history API개발자가 프런트 엔드 라우팅을 직접 변경할H5 수 있는 새로운 기능 입니다 . 즉, 요청을 다시 시작 하지 않고 브라우저 주소를 업데이트할 수 있습니다 .URL
2. 히스토리 API
몇 가지 HTML5추가 사항은 아래에 설명되어 있습니다 history API. 자세한 내용은 다음과 같습니다.
| API | 정의 |
|---|---|
| history.pushState(데이터, 제목 [, URL]) | pushState는 주로 기록 스택의 맨 위에 레코드를 추가하는 데 사용됩니다 . 파라미터는 다음과 같이 분석됩니다: ①onpopstate 이벤트가 트리거될 때 데이터가 파라미터로 전달됩니다 ②title 은 페이지 제목이며 현재 모든 브라우저는 이 파라미터를 무시합니다 ③url 은 선택 사항인 페이지 주소이며 현재 페이지 주소가 없는 경우 |
| history.replaceState(데이터, 제목 [, URL]) | 현재 이력 변경, 매개변수는 위와 동일, 위의 pushState 추가, 이 변경 |
| 역사.상태 | 위 방법의 데이터를 저장하는 데 사용되며 브라우저마다 읽기 및 쓰기 권한이 다릅니다. |
| window.onpopstate | pushState 또는 replaceState 호출에 대한 응답 |
3. 역사의 특징
의 history주요 기능은 다음과 같습니다.
- new 는 current 와 같은 출처
url일 수도 있고 current 와 같은 주소 일 수도 있지만 이렇게 하면 반복되는 연산이 스택에 기록되는 문제가 발생합니다.urlurlurl - 패스
history.state, 모든 유형의 데이터를 레코드에 추가합니다. - 후속 사용을 위해 추가 속성을 설정할 수 있습니다
title. pushState를 통해replaceState새로 고침 점프가 없는 기능을 실현합니다.
4. 문제가 있다
의 경우 기존의 history많은 문제를 해결 하지만 새로운 문제도 가져옵니다. 세부 사항은 다음과 같습니다.hash
history모드를 사용할 때 현재 페이지를 새로 고칠 때 브라우저가 요청을 다시 시작합니다. 현재 항목 을nginx가져올 일치 항목이 없으면 페이지 가 나타납니다.url404hash스키마는 변경된 것처럼 보이지만 요청 에url포함되지 않습니다 .http따라서 브라우저의 동작을 안내하는 데 사용되며 서버 측에는 영향을 미치지 않습니다. 따라서 변경 사항은hash실제로 변경되지 않으므로url페이지 경로는 여전히 이전 경로이며nginx가로채지 않습니다.- 따라서 모드를 사용할 때 서버를 통해 주소에 접근할 수 있도록 허용
history해야 하며 설정하지 않으면 나타나는 상황으로 이어지기 쉽습니다.404