vue-roter에는 3가지 모드가 있습니다. 1. 라우팅에 URL 해시 값을 사용하고 모든 브라우저를 지원하는 해시 모드. 이 모드에서 구현된 라우팅은 링크 뒤에 ""#"+경로 이름"을 추가합니다. 2. h5에서 제공하는 히스토리 객체로 구현되는 히스토리 모드는 H5 히스토리 API 및 서버 구성을 사용합니다. 3. 추상 모드는 Node 서버와 같은 모든 JS 실행 환경을 지원합니다. 브라우저 API가 없는 것으로 확인되면 경로가 자동으로 이 모드로 강제 설정됩니다.
이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.
Vue-router는 Vue 프레임워크용 라우팅 플러그인입니다.
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}`)
}
}
}
}기본적으로 해시 모드가 사용되는 것을 볼 수 있습니다. 히스토리로 설정하면 히스토리 방식이 지원되지 않으면 해시 모드도 강제로 사용됩니다. 노드 등의 브라우저 환경이 아닌 경우에는 추상 모드를 직접 강제로 사용하게 됩니다.
해시 모드
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 메서드를 호출하여 뷰
기록 모드
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 메서드를 사용하여 보기를 업데이트합니다.
푸시, 교체 등의 방법은 자세히 소개하지 않습니다. 추상 모드
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
