Vue 라우팅의 두 가지 모드는 무엇입니까?-프런트엔드 Q&A-php.cn

Vue 라우팅의 두 가지 모드는 무엇입니까?

青灯夜游

풀어 주다： 2022-01-10 16:57:44

원래의

16164명이 탐색했습니다.

Vue 라우팅에는 두 가지 모드가 있습니다. 1. 창 개체에서 모니터링할 수 있는 onhashchange 이벤트를 원칙으로 하는 해시 모드 2. "history.pushState" API를 사용하여 URL 점프를 완료할 수 있는 기록 모드.

Vue 라우팅의 두 가지 모드는 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

프런트엔드와 백엔드 분리 ===> Ajax를 사용하면 브라우저를 새로 고치지 않고도 비동기 데이터 요청과 상호 작용할 수 있습니다.

단일 페이지 애플리케이션(html 파일은 하나만 있고 전체 웹사이트의 모든 내용은 js를 통해 처리되는 이 html에 있습니다.) 페이지 상호 작용에 새로 고침이 없을 뿐만 아니라 페이지 이동도 새로고침 없이 모두 가능합니다. 단일 페이지 애플리케이션을 구현하기 위해 ==> 프런트엔드와 백엔드 분리 + 프런트엔드 라우팅. (뷰를 업데이트하지만 페이지를 다시 요청하지 않음)

프런트 엔드 라우팅은 실제로 구현하기가 매우 간단합니다. 즉, 다른 URL 경로와 일치하고 이를 구문 분석하고 다른 구성 요소를 로드한 다음 지역 HTML을 동적으로 렌더링합니다. 콘텐츠.

해시 모드

#다음 해시 값이 변경되어도 브라우저는 서버에 요청을 보내지 않습니다. 브라우저가 요청을 보내지 않으면 페이지가 새로 고쳐지지 않습니다. 해시 값이 변경될 때마다 hashchange 이벤트가 발생합니다. 이 이벤트를 통해 해시 값에 어떤 변화가 발생했는지 알 수 있습니다. 그런 다음 hashchange를 모니터링하여 페이지 콘텐츠의 일부를 업데이트할 수 있습니다. : hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听hashchange来实现更新页面部分内容的操作：

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来改变页面字体颜色。

当你选择mode类型之后，程序会根据你选择的mode 类型创建不同的history对象(hash:HashHistory 或 history:HTML5History 或 abstract:AbstractHistory)

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

로그인 후 복사

HashHistory有两个方法：HashHistory.push()将新路由添加到浏览器访问历史的栈顶和 HashHistory.replace()替换掉当前栈顶的路由

因为hash发生变化的url都会被浏览器记录（历史访问栈）下来，从而你会发现浏览器的前进后退都可以用了。这样一来，尽管浏览器没有请求服务器，但是页面状态和url一一关联起来。

history模式

因为HTML5标准发布，多了两个 API，pushState() 和 replaceState()。通过这两个 API （1）可以改变 url 地址且不会发送请求，（2）不仅可以读取历史记录栈，还可以对浏览器历史记录栈进行修改。

除此之外，还有popState().当浏览器跳转到新的状态时，将触发popState事件.

修改历史状态

包括了pushState,replaceState两个方法,这两个方法接收三个参数:stateObj,title,url

window.history.pushState(stateObject, title, URL)
window.history.replaceState(stateObject, title, URL)

로그인 후 복사

切换历史状态

包括back,forward,go

hash 모드의 기본 원칙은 onhashchange 이벤트이며 onhashchange 이벤트입니다. code>window 객체에서 다음 이벤트를 수신합니다.

new Vue({
  router
})

로그인 후 복사

위 코드는 해시를 변경하여 페이지 글꼴 색상을 변경할 수 있습니다.
모드 유형을 선택한 후 프로그램은 선택한 모드 유형에 따라 다른 기록 개체(hash:HashHistory 또는 History:HTML5History 또는 abstract:AbstractHistory)를 생성합니다. rrreeeHashHistory에는 HashHistory.push()는 브라우저 액세스 기록 스택 및 HashHistory.replace()는 현재 스택의 상단에 있는 경로를 대체합니다 해시 변경 사항이 있는 URL은 브라우저(히스토리 액세스 스택)에 기록되므로 브라우저의 forward 및backward
를 사용할 수 있음을 알 수 있습니다. 이런 식으로 브라우저가 서버에 요청하지 않더라도 페이지 상태와 URL이 하나씩 연결됩니다.
history 모드
HTML5 표준의 출시로 인해 pushState() 및 replaceState()라는 두 가지 API가 더 있습니다. 이 두 API를 통해 (1) 요청을 보내지 않고도 URL 주소를 변경할 수 있습니다, (2) 기록 스택을 읽을 수 있을 뿐만 아니라 브라우저 기록 스택을 수정할 수도 있습니다. 또한 popState()가 있습니다. 브라우저가 새로운 상태로 점프하면 popState 이벤트가 트리거됩니다.
이전 상태 수정
pushState</ code>가 포함됩니다. <code>replaceState 두 가지 메서드, 이 두 메서드는 stateObj, title, urlrrreee
기록 상태 전환
back, forward 포함)의 세 가지 매개변수를 받습니다. , go 세 가지 메서드는 브라우저의 앞으로, 뒤로 및 점프 이동 작업에 해당합니다. 어떤 학생은 (구글) 브라우저는 앞으로 가기와 뒤로 가기만 있고 점프는 없다고 하더군요.. 그런데 앞으로 가기와 뒤로 가기 버튼을 마우스로 누르고 있으면 현재 모든 창의 기록이 나타나서 할 수 있다고 합니다. 점프(점프라고 부르는 것이 더 적절할 수도 있음):
history.
-2);//두 번 뒤로
🎜🎜🎜🎜 🎜🎜 🎜🎜history.🎜go(🎜🎜2)🎜 ;🎜🎜//두번 앞으로🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜history.🎜back()🎜 🎜🎜//뒤로 🎜🎜🎜🎜🎜🎜
hsitory.forward(); //前进