vue-roter には 3 つのモードがあります: 1. ハッシュ モード、ルーティングに URL ハッシュ値を使用し、すべてのブラウザをサポートします。このモードで実装されたルーティングでは、リンクの後に「"#" ルーティング名」が追加されます。 2. h5 によって提供される履歴オブジェクトによって実装される履歴モードは、H5 History API とサーバー構成に依存します。 3. 抽象モードは、ノード サーバーなどのすべての JS 実行環境をサポートします。ブラウザ API がないことが判明した場合、ルートは自動的にこのモードに強制されます。
Vue-router は、vue フレームワークのルーティング プラグインです。
まず結論について話しましょう。spa アプリケーション ルーティングにはハッシュとヒストリーの 2 つのモードがあり、vue ルーティングには 3 つのモードがあり、1 つは spa よりも抽象的です。
ソースコード分析
const router = new VueRouter({
mode: 'history',
routes: [...]
})具体的な実装方法。まずダウンロードします。
vue-routerclass 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 の 2 つの主要な API のプッシュと置換も単純にハッシュを処理し、transitionTo メソッドを呼び出してビューを更新します
履歴モード
window.onpopstate = function(e) {
alert(2);
}
let stateObj = {
foo: "bar",
};
history.pushState(stateObj, "page 2", "bar.html");これにより、ブラウザのアドレス バーは
mozilla.org/bar.html として表示されますが、ブラウザのロード バーは表示されません。 .html は、 bar.html が存在するかどうかさえチェックしません。
つまり、ブラウザの URL が変更されても、リクエストはすぐにはサーバーに再送信されません。これは、スパ アプリケーションがビューを更新してもページを再リクエストしないための基礎でもあります。
次に、vue-router ソース コードの /src/history/html5.js の処理を続けて見ていきます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> 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)
})</pre><div class="contentsignin">ログイン後にコピー</div></div>処理ロジックはハッシュに似ており、window.addEventListener("popstate", fun) を使用して実行します。ルーティングの変更を監視し、transitionTo メソッドを使用してビューを更新します。
プッシュや置換などのメソッドについては詳しくは紹介しません。
抽象モード
constructor (router: Router, base: ?string) {
super(router, base)
this.stack = []
this.index = -1
}最初に2つの変数を定義し、スタックして呼び出しを記録します。 Record、index は、現在のポインターの位置を記録します。
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 メソッドと replac メソッドは、スタック変数とインデックス変数を使用して、ブラウザーの履歴呼び出しレコードをシミュレートします。
まとめ
hash 和history 的使用方式差不多，hash 中路由帶# ，但是使用簡單，不需要服務端配合，站在技術角度講，這個是配置最簡單的模式，本人感覺這也是hash 被設為預設模式的原因
history 模式需要服務端配合處理404的情況，但是路由中不帶# ，比hash 美觀一點。
abstract 模式支援所有JavaScript運行環境，如Node.js伺服器端，如果發現沒有瀏覽器的API，路由會自動強制進入這個模式。
abstract 模式沒有使用瀏覽器api，可以放到node環境或桌面應用中，是 spa應用 的兜底和能力擴充。
以上がvue-roter にはいくつかのモードがありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
