vuejs의 라우팅 구현 원리에 대한 자세한 설명-JS 튜토리얼-php.cn

vuejs의 라우팅 구현 원리에 대한 자세한 설명

不言

풀어 주다： 2018-10-24 10:28:32

앞으로

2661명이 탐색했습니다.

이 글은 vuejs의 라우팅 구현 원리에 대한 자세한 설명을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

일반적인 소스 코드에서는 window.history 및 location.hash가 사용됩니다.

history 구현

window.history 개체에는 브라우저의 기록이 포함되어 있습니다. window.history 개체는 작성 시 창 접두어를 사용할 필요가 없습니다. History는 SPA 프런트 엔드 라우팅을 구현하는 주요 방법입니다.

history.back()

브라우저에서 뒤로 버튼을 클릭하는 것과 동일합니다.

history.forward()

탐색과 동일 브라우저에서 앞으로 버튼을 클릭하는 것은

history.go(n)

과 동일하며 정수를 매개변수로 받아들이고 정수에 지정된 페이지로 이동합니다. 예를 들어 go(1)은 다음과 같습니다. forward()와 동일, go(-1)은 동일 back()과 비교하여 go(0)은 현재 페이지 새로고침과 동일
이동된 위치가 접근 기록의 경계를 초과하는 경우 위의 세 가지 방법은 보고하지 않습니다. 오류가 발생했지만 자동으로 실패합니다.

HTML5에서 기록 개체는 pushState() 메서드와 replacementState() 메서드를 제안합니다. 이 두 메서드는 마치 URL이 변경된 것처럼(과거에) 기록 스택에 데이터를 추가하는 데 사용할 수 있습니다. , URL 변경 기록 스택만 변경됨), 탐색 기록 및 진행 상황을 잘 시뮬레이션할 수 있도록 후퇴 후 현재 프런트 엔드 라우팅도 이 원칙에 따라 구현됩니다.

history.pushState

pushState(stateObj, title, url) 메소드는 기록 스택에 데이터를 기록합니다. 첫 번째 매개변수는 기록할 데이터 객체(640kB 이하)이고 두 번째 매개변수는 페이지 제목입니다. . , 세 번째 매개변수는 url(상대 경로)입니다.

stateObj: 지정된 URL과 관련된 상태 개체입니다. popstate 이벤트가 트리거되면 이 개체가 콜백 함수에 전달됩니다. 이 객체가 필요하지 않으면 이 *에 null을 채울 수 있습니다.
title: 새 페이지의 제목이지만 현재 모든 브라우저에서 이 값을 무시하므로 여기에 null을 채울 수 있습니다.
url: 새 URL은 현재 페이지와 동일한 도메인에 있어야 합니다. 브라우저의 주소 표시줄에 이 URL이 표시됩니다.
pushState에 대해 주목할 만한 몇 가지 사항이 있습니다.

pushState 메서드는 페이지 새로 고침을 트리거하지 않고 기록 개체만 변경하며 주소 표시줄은 앞으로 및 뒤로와 같은 이벤트가 트리거될 때만 반응합니다. () 및 전달() 브라우저는 동일 출처 정책을 위반한 경우에만 새로 고침됩니다
여기의 URL은 악성 스크립트가 다른 웹사이트 URL을 모방하여 사용자를 속이는 것을 방지하기 위해 동일 출처 정책에 의해 제한되므로 동일 출처 정책을 위반한 경우 , 오류가 보고됩니다

history.replaceState

replaceState (stateObj, title, url)과 pushState의 차이점은 검색 기록의 현재 기록을 쓰지 않고 교체하고 수정한다는 점입니다. 나머지는 완전히 동일합니다. pushState로.

popstate 이벤트

정의: 동일한 문서의 검색 기록(예: 기록 개체)이 변경될 때마다 popstate 이벤트가 트리거됩니다.
참고: pushState 메소드 또는 replacementState 메소드를 호출하는 것만으로는 이 이벤트가 트리거되지 않습니다. 사용자가 브라우저의 뒤로 버튼 및 앞으로 버튼을 클릭하거나 JavaScript를 사용하여 뒤로, 앞으로 및 이동 메소드를 호출하는 경우에만 트리거됩니다. 또한 이 이벤트는 동일한 문서만 대상으로 합니다. 검색 기록 전환으로 인해 다른 문서가 로드되는 경우 이 이벤트는 트리거되지 않습니다.
사용법: 사용 시 popstate 이벤트에 대한 콜백 함수를 지정할 수 있습니다. 이 콜백 함수의 매개변수는 이벤트 객체이고, 해당 상태 속성은 현재 URL에 대한 pushState 및 replacementState 메소드(즉, 이 두 메소드의 첫 번째 매개변수)가 제공하는 상태 객체를 가리킵니다.

HISTORY는 SPA 프런트엔드 라우팅 코드를 구현합니다

<a class="spa">abc.html</a>
<a class="spa">123.html</a>
<a href="/rdhub" class="spa ">rdhub</a>
  // 注册路由
  document.querySelectorAll('.spa').forEach(item => {
    item.addEventListener('click', e => {
      e.preventDefault();
      let link = item.textContent;
      if (!!(window.history && history.pushState)) {
        // 支持History API
        window.history.pushState({name: 'history'}, link, link);
      } else {
        // 不支持,可使用一些Polyfill库来实现
      }
    }, false)
  });

  // 监听路由
  window.addEventListener('popstate', e => {
    console.log({
      location: location.href,
      state: e.state
    })
  }, false)
popstate监听函数里打印的e.state便是history.pushState()里传入的第一个参数，在这里即为{name: 'history'}

로그인 후 복사

hash

해시에 대한 기본 소개

url은 해시를 가질 수 있습니다. http://localhost:9000/#/rdhub.html

창 개체의 한 이벤트는 onhashchange입니다. . 다음 상황에서 이 이벤트가 발생합니다.

브라우저 주소를 직접 변경하거나 끝에 #hash를 추가하거나 변경합니다.
location.href 또는 location.hash 값을 변경합니다. 트리거 앵커가 있는 링크를 클릭하세요.
두 웹페이지 주소의 해시 값이 다른 경우 브라우저가 앞뒤로 이동하면 해시가 변경될 수 있습니다.

해시는 SPA 프런트엔드 라우팅 코드를 구현합니다

<a href="/rdhub" class="spa">rdhub</a>
<a href="/abc" class="spa">abc</a>
<a href="/123" class="spa">123</a>
<a href="/hash" class="spa">hash</a>
  document.querySelectorAll('.spa').forEach(item => {
    item.addEventListener('click', e => {
      e.preventDefault();
      let link = item.textContent;
      location.hash = link;
    }, false)
  });
  // 监听路由
  window.addEventListener('hashchange', e => {
    console.log({
      location: location.href,
      hash: location.hash
    })
  }, false)

로그인 후 복사

두 가지 모드의 비교

hash模式与history模式，这两种模式都是通过浏览器接口实现的，除此之外vue-router还为非浏览器环境准备了一个abstract模式，其原理为用一个数组stack模拟出浏览器历史记录栈的功能。当然，以上只是一些核心逻辑，为保证系统的鲁棒性源码中还有大量的辅助逻辑，也很值得学习。 pushState에 의해 설정된 새 URL은 현재 URL과 동일한 출처를 가진 URL일 수 있지만 해시는 수정만 가능합니다. # 뒤에 부분만 있으므로 현재 문서와 동일한 문서의 URL을 설정할 수 있습니다.

pushState에 의해 설정된 새 URL은 현재 URL과 정확히 동일할 수 있으며, 이는 레코드를 스택에 추가하고 새 URL도 추가합니다. 해시에 의해 설정된 값은 스택에 레코드 추가를 트리거하기 위해 원래 값과 달라야 합니다.

pushState는 stateObject를 통해 레코드에 모든 유형의 데이터를 추가할 수 있지만 해시는 짧은 문자열만 추가할 수 있습니다.

pushState는 추가로 설정할 수 있습니다. 이후 사용을 위한 제목 속성

히스토리 모드의 문제

단일 페이지 애플리케이션의 경우 이상적인 사용 시나리오는 애플리케이션에 들어갈 때 index.html만 로드하고 후속 네트워크 작업은 Ajax를 통해 완료되며 페이지가 다시 표시되지 않는다는 것을 알고 있습니다. 그러나 사용자가 주소 표시줄에 직접 입력하고 Enter를 누르거나 브라우저가 다시 시작되고 애플리케이션이 다시 로드되는 등 특수한 상황이 발생할 수 있습니다.

해시 모드는 해시 부분의 내용만 변경하며, 해시 부분은 HTTP 요청에 포함되지 않습니다.

http://rdhub.cn/#/user/id // 요청이 다시 요청되는 경우 , http://만 전송됩니다. /rdhub.cn/
그래서 해시 모드에서 URL을 기반으로 페이지를 요청할 때 문제가 없습니다.

기록 모드는 URL을 일반 요청 백엔드의 URL과 동일하게 수정합니다
http://rdhub.cn/user/id
이 경우 요청이 다시 백엔드로 전송됩니다. 백엔드가 이에 맞게 구성되지 않았습니다./사용자/ID 라우팅 처리가 404 오류를 반환합니다.

공식적으로 권장되는 솔루션은 모든 상황을 포괄하는 후보 리소스를 서버 측에 추가하는 것입니다. URL이 정적 리소스와 일치하지 않으면 앱이 의존하는 페이지인 동일한 index.html 페이지를 반환해야 합니다. 동시에 이 작업을 수행하면 모든 경로에 대해 index.html 파일이 반환되므로 서버는 더 이상 404 오류 페이지를 반환하지 않습니다. 이를 방지하려면 Vue 애플리케이션의 모든 라우팅 상황을 다룬 다음 404 페이지를 제공하세요. 또는 Node.js를 백엔드로 사용하는 경우 서버 측 라우팅을 사용하여 URL을 일치시키고 일치하는 경로가 없으면 404를 반환하여 fallback을 구현할 수 있습니다.

위 내용은 vuejs의 라우팅 구현 원리에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!