ホームページ > 記事 > ウェブフロントエンド > vue-roter にはいくつかのモードがあります
#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。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 の処理を続けて見ていきます。 <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>
処理ロジックはハッシュに似ており、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 サイトの他の関連記事を参照してください。