Vue의 단일 페이지 애플리케이션을 위한 프런트엔드 라우팅 사용에 대한 자세한 설명

이번에는 vue 단일 페이지 애플리케이션에서 프런트엔드 라우팅 사용에 대해 자세히 설명하겠습니다. vue 단일 페이지 애플리케이션 프런트엔드 라우팅 사용 시 주의사항은 무엇인가요? 보세요.

전에 작성함: 일반적으로 SPA에서 프런트 엔드 라우팅을 구현하는 방법은 두 가지가 있습니다.

1. window.history

2. location.hash

다음은 이 두 가지 방법을 구현하는 방법을 소개합니다

一.history

1. 히스토리 기본 소개

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

1. history.back() - 브라우저에서 뒤로 버튼을 클릭하는 것과 동일

2. history.forward() - 탐색과 동일 브라우저에서 버튼을 클릭하는 것은 앞으로

3. history.go(n)과 동일합니다. - 정수를 매개변수로 받아들이고 정수로 지정된 페이지로 이동합니다. 예를 들어 go(1)은 동일합니다. 앞으로(), go(-1)은 뒤로(), go(0)은 현재 페이지 새로고침과 동일

4. 이동된 위치가 접속 기록의 경계를 초과하는 경우 위의 세 가지 방법은 작동하지 않습니다. 오류를 보고하지만 자동으로 실패합니다

HTML5에서는 history 객체 Proposed pushState() 메서드와 replacementState() 메서드를 사용하여 마치 URL이 변경되는 것처럼 히스토리 스택에 데이터를 추가할 수 있습니다. 과거에는 URL 변경 기록 스택만 변경되었으므로 매우 유용할 수 있습니다. 이제 시뮬레이션된 검색 기록과 앞으로 및 뒤로가 이 원칙에 따라 구현됩니다.

2.history.pushState

pushState(stateObj, title, url) 메소드는 기록 스택에 데이터를 씁니다(640kB 이하). 두 번째 매개변수는 다음과 같습니다. 페이지 제목, 세 번째 매개변수는 url(상대 경로)입니다.

1. stateObj: 지정된 URL과 관련된 상태 개체입니다. popstate 이벤트가 트리거되면 이 개체는 콜백 함수로 전달됩니다. 이 객체가 필요하지 않은 경우 여기에 null을 채울 수 있습니다.

2. title: 새 페이지의 제목이지만 현재 모든 브라우저에서 이 값을 무시하므로 여기에 null을 채울 수 있습니다.

3. url: 새 URL은 현재 페이지와 동일한 도메인에 있어야 합니다. 브라우저의 주소 표시줄에 이 URL이 표시됩니다.

pushState에 대해 주목할 만한 몇 가지 사항이 있습니다.

pushState 메서드는 페이지 새로 고침을 실행하지 않고 단지 기록 개체를 변경하며 주소 표시줄은 앞으로 및 뒤로와 같은 이벤트가 있을 때만 반응합니다.

여기의 URL은 악성 스크립트가 다른 웹사이트 URL을 모방하여 사용자를 속이는 것을 방지하기 위해 동일 출처 정책에 의해 제한되므로 동일 출처 정책을 위반할 경우, 오류가 보고됩니다

3 .history.replaceState

replaceState(stateObj, title, url) pushState와의 차이점은 검색 기록의 현재 기록을 쓰지 않고 교체하고 수정한다는 것입니다. pushState

4와 동일합니다. popstate event

정의: 동일한 문서의 검색 기록(즉, 기록 개체)이 변경될 때마다 popstate 이벤트가 트리거됩니다.

참고: pushState 메소드 또는 replacementState 메소드 호출만으로는 이 이벤트가 트리거되지 않습니다. 사용자가 브라우저의 뒤로 버튼 및 앞으로 버튼을 클릭하거나 JavaScript를 사용하여 뒤로, 앞으로 및 이동 메소드를 호출할 때만 트리거됩니다. . 또한 이 이벤트는 동일한 문서만 대상으로 합니다. 검색 기록 전환으로 인해 다른 문서가 로드되는 경우 이 이벤트는 트리거되지 않습니다.

사용법: 사용 시 popstate 이벤트에 대한 콜백 함수를 지정할 수 있습니다. 이 콜백 함수의 매개변수 는 이벤트 객체이고, 해당 상태 속성은 현재 URL에 대한 pushState 및 replacementState 메소드(즉, 이 두 메소드의 첫 번째 매개변수)가 제공하는 상태 객체를 가리킵니다.

5.history는 스파 프런트엔드 라우팅 코드를 구현합니다

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

popstate 청취 함수에 인쇄된 e.state는 History.pushState()에 전달된 첫 번째 매개변수입니다. 여기서는 {name: 'api' }

입니다.

二.Hash

1.Hash基本介绍

url 中可以带有一个 hash http://localhost:9000/#/a.html

window 对象中有一个事件是 onhashchange，以下几种情况都会触发这个事件：

1. 直接更改浏览器地址，在最后面增加或改变#hash；

2. 通过改变location.href或location.hash的值；

3. 通过触发点击带锚点的链接；

4. 浏览器前进后退可能导致hash的变化，前提是两个网页地址中的hash值不同。

2.Hash实现spa前端路由代码

  // 注册路由
  document.querySelectorAll('.api').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)

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue.js实现操作class的方法

D3.js实现动态仪表盘案列

위 내용은 Vue의 단일 페이지 애플리케이션을 위한 프런트엔드 라우팅 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!