vue-roter에는 여러 가지 모드가 있습니다
- 青灯夜游원래의
- 2022-07-21 19:02:032362검색
vue-roter에는 3가지 모드가 있습니다. 1. 라우팅에 URL 해시 값을 사용하고 모든 브라우저를 지원하는 해시 모드. 이 모드에서 구현된 라우팅은 링크 뒤에 ""#"+경로 이름"을 추가합니다. 2. h5에서 제공하는 히스토리 객체로 구현되는 히스토리 모드는 H5 히스토리 API 및 서버 구성을 사용합니다. 3. 추상 모드는 Node 서버와 같은 모든 JS 실행 환경을 지원합니다. 브라우저 API가 없는 것으로 확인되면 경로가 자동으로 이 모드로 강제 설정됩니다.
이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.
Vue-router는 Vue 프레임워크용 라우팅 플러그인입니다.
vue-roter에는 여러 가지 모드가 있습니다
vue-router 공식 웹사이트에 따르면 vue-router에는 3가지 모드 값이 있음을 분명히 알 수 있습니다
hash
history
-
abstract
그 중 SPA 단일 페이지 애플리케이션의 기본은 해시와 히스토리입니다.
먼저 결론부터 이야기하자면, 스파 애플리케이션 라우팅에는 해시와 히스토리의 2가지 모드가 있고, Vue 라우팅에는 스파보다 하나 더 추상적인 3가지 모드가 있습니다.
소스 코드 분석
vue-router의 모드 매개변수를 통해 라우팅 모드를 수정합니다.
const router = new VueRouter({
mode: 'history',
routes: [...]
})
구체적으로 구현하는 방법은 무엇인가요? 먼저 vue-router의 소스 코드를 다운로드하고 모드 처리를 추출합니다
class vueRouter {
constructor(options) {
let mode = options.mode || 'hash'
this.fallback =
mode === 'history' && !supportsPushState && options.fallback !== false
if (this.fallback) {
mode = 'hash'
}
if (!inBrowser) {
mode = 'abstract'
}
this.mode = mode
switch (mode) {
case 'history':
this.history = new HTML5History(this, options.base)
break
case 'hash':
this.history = new HashHistory(this, options.base, this.fallback)
break
case 'abstract':
this.history = new AbstractHistory(this, options.base)
break
default:
if (process.env.NODE_ENV !== 'production') {
assert(false, `invalid mode: ${mode}`)
}
}
}
}
기본적으로 해시 모드가 사용되는 것을 볼 수 있습니다. 히스토리로 설정하면 히스토리 방식이 지원되지 않으면 해시 모드도 강제로 사용됩니다. 노드 등의 브라우저 환경이 아닌 경우에는 추상 모드를 직접 강제로 사용하게 됩니다.
해시 모드
소스 코드의 이 부분을 읽기 전에 먼저 해시의 기본 사항을 이해해 보겠습니다. MDN 소개에 따르면 Location 인터페이스의 해시 속성은 URL 식별자에 '#'을 포함하는 USVString을 반환하며 다음 URL 조각 식별자 '#'과 다음 URL 조각 식별자를 해시라고 합니다. 여기에는 다음과 같은 특징이 있습니다.
- 첫 번째 # 뒤에 나타나는 모든 문자는 브라우저에서 위치 식별자로 해석됩니다. 이는 이러한 문자가 서버로 전송되지 않음을 의미합니다.
- # 다음 부분만 변경하면 브라우저는 해당 위치까지만 스크롤하고 웹페이지를 다시 로드하지 않습니다.
- # 부분을 변경할 때마다 브라우저의 접속 기록에 기록이 추가됩니다. 이전 위치로 돌아가려면 "뒤로" 버튼을 사용하세요.
- 해시 값은 window.location.hash 속성을 통해 읽을 수 있으며, window.location.hash 속성은 읽기 및 쓰기가 가능합니다.
- window.addEventListener("hashchange", fun)를 사용하여 해시 변경 사항을 모니터링하세요
- 이러한 기본 지식을 이해한 후 vue-router 소스 코드의 /src/history/hash.js 처리를 계속 살펴보겠습니다.
const handleRoutingEvent = () => {
const current = this.current
if (!ensureSlash()) {
return
}
this.transitionTo(getHash(), route => {
if (supportsScroll) {
handleScroll(this.router, route, current, true)
}
if (!supportsPushState) {
replaceHash(route.fullPath)
}
})
}
const eventType = supportsPushState ? 'popstate' : 'hashchange'
window.addEventListener(
eventType,
handleRoutingEvent
)
this.listeners.push(() => {
window.removeEventListener(eventType, handleRoutingEvent)
})
먼저, 우리는 또한 window.addEventListener("hashchange", fun)를 사용하여 라우팅 변경 사항을 모니터링한 다음 TransitionTo 메서드를 사용하여 뷰를 업데이트합니다.
push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
const { current: fromRoute } = this
this.transitionTo(
location,
route => {
pushHash(route.fullPath)
handleScroll(this.router, route, fromRoute, false)
onComplete && onComplete(route)
},
onAbort
)
}
replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
const { current: fromRoute } = this
this.transitionTo(
location,
route => {
replaceHash(route.fullPath)
handleScroll(this.router, route, fromRoute, false)
onComplete && onComplete(route)
},
onAbort
)
}
vue-router의 두 가지 주요 API인 push 및 replacement는 또한 간단히 해시를 처리한 다음 전환To 메서드를 호출하여 뷰
기록 모드
를 업데이트합니다. 오래된 규칙이므로 먼저 HTML5History의 기본 지식을 이해해 보겠습니다. MDN 소개에 따르면 History 인터페이스를 사용하면 탭이나 프레임에서 액세스한 브라우저의 세션 기록을 조작할 수 있습니다. 사용자 기록에서 앞뒤로 이동하려면 back(), 앞으로() 및 go() 메서드를 사용합니다. HTML5에는 기록 항목을 각각 추가하고 수정할 수 있는 History.pushState() 및 History.replaceState() 메서드가 도입되었습니다. History.pushState()에 대한 정보:
window.onpopstate = function(e) {
alert(2);
}
let stateObj = {
foo: "bar",
};
history.pushState(stateObj, "page 2", "bar.html");
이렇게 하면 브라우저 주소 표시줄이
로 표시되지만 브라우저가 bar.html을 로드하거나 bar.html이 존재하는지 확인하지는 않습니다. 즉, 브라우저 URL이 변경되더라도 즉시 서버에 요청을 다시 보내지 않습니다. 이는 스파 응용 프로그램이 보기를 업데이트하지만 페이지를 다시 요청하지 않는 기초이기도 합니다. 그런 다음 vue-router 소스 코드의 /src/history/html5.js 처리를 계속 살펴봅니다. const handleRoutingEvent = () => {
const current = this.current
// Avoiding first `popstate` event dispatched in some browsers but first
// history route not updated since async guard at the same time.
const location = getLocation(this.base)
if (this.current === START && location === this._startLocation) {
return
}
this.transitionTo(location, route => {
if (supportsScroll) {
handleScroll(router, route, current, true)
}
})
}
window.addEventListener('popstate', handleRoutingEvent)
this.listeners.push(() => {
window.removeEventListener('popstate', handleRoutingEvent)
})
mozilla.org/bar.html처리 논리는 해시와 유사합니다. window.addEventListener("popstate", fun)를 사용하여 라우팅 변경 사항을 모니터링합니다. 그런 다음 전환To 메서드를 사용하여 보기를 업데이트합니다.
푸시, 교체 등의 방법은 자세히 소개하지 않습니다. 추상 모드
마지막으로 /src/history/abstract.js의 처리를 직접 살펴보겠습니다.
constructor (router: Router, base: ?string) {
super(router, base)
this.stack = []
this.index = -1
}
먼저 두 개의 변수를 정의하고, 호출 기록을 기록하는 스택과 현재 포인터 위치를 기록하는 인덱스를 정의합니다
push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
this.transitionTo(
location,
route => {
this.stack = this.stack.slice(0, this.index + 1).concat(route)
this.index++
onComplete && onComplete(route)
},
onAbort
)
}
replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
this.transitionTo(
location,
route => {
this.stack = this.stack.slice(0, this.index).concat(route)
onComplete && onComplete(route)
},
onAbort
)
}
push 및 relac 메소드는 스택 및 인덱스 변수를 사용하여 브라우저의 과거 호출 기록을 시뮬레이션합니다.
Summary
드디어 최종 요약 단계에 도달했습니다:
해시는 히스토리와 같은 방식으로 사용됩니다. 해시의 경로에는 #이 포함되어 있지만 사용이 간편하고 기술적인 측면에서 보면 구성이 가장 간단한 모드입니다. 이것이 해시의 기본 설정이기도 하다는 점입니다.
history 모드를 사용하는 이유는 404 상황을 처리하기 위해 서버가 협조해야 하는데 경로에 #이 없기 때문에 해시보다 아름답습니다.
-
추상 모드는 Node.js 서버 측과 같은 모든 JavaScript 실행 환경을 지원합니다. 브라우저 API가 없는 것으로 확인되면 라우팅이 자동으로 이 모드로 강제 전환됩니다.
추상 모드는 브라우저 API를 사용하지 않으며 노드 환경이나 데스크톱 애플리케이션에 배치할 수 있습니다. 스파 애플리케이션을 위한 포괄적인 기능 확장입니다.
【추천 관련 동영상 튜토리얼: vue 동영상 튜토리얼, 웹 프론트엔드 시작하기】
위 내용은 vue-roter에는 여러 가지 모드가 있습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!