ホームページ > 記事 > ウェブフロントエンド > vuejsのルーティング実装原理を詳しく解説
この記事では、vuejs のルーティング実装原理について詳しく説明します。必要な方は参考にしていただければ幸いです。
一般的なソース コードでは、window.history と location.hash が使用されます。
history の実装
window.history オブジェクトには、ブラウザとウィンドウの履歴が含まれます。書き込み時に履歴オブジェクトが使用されます。ウィンドウ接頭辞を使用する必要はありません。 History は、SPA フロントエンド ルーティングを実装するための主流の方法です。これには、いくつかの独自のメソッドがあります。
history.back()
ブラウザの [戻る] ボタンをクリックするのと同じです#。##history.forward()ブラウザで進むボタンをクリックするのと同じ
history.go(n)
パラメータとして整数を受け入れ、その整数で指定されたページに移動します。たとえば、go(1) は forward() と同等、go(-1) は back() と同等、go(0) は同等です。現在のページを更新します。If 移動された位置がアクセス履歴の境界を超えている場合、上記の 3 つのメソッドはエラーを報告しませんが、通知せずに失敗します。
title: 新しいページのタイトルですが、現在すべてのブラウザはこの値を無視するため、ここに null を入力できます。
url: 新しい URL は、現在のページと同じドメイン内にある必要があります。ブラウザのアドレス バーにこの URL が表示されます。
PushState に関しては、注目すべき点がいくつかあります。
ここの URL は、悪意のあるスクリプトが他の Web サイトの URL を模倣してユーザーを欺くことを防ぐために、同一生成元ポリシーによって制限されています。ポリシーに違反すると、エラーが報告されます。
注: このイベントは、pushState メソッドまたは replaceState メソッドを呼び出すだけではトリガーされません。ユーザーがブラウザーの「戻る」ボタンおよび「進む」ボタンをクリックした場合、または JavaScript を使用して「戻る」、「進む」、および「進む」メソッドを呼び出した場合にのみトリガーされます。また、このイベントは同じドキュメントのみを対象とします。閲覧履歴の切り替えにより異なるドキュメントが読み込まれる場合、このイベントはトリガーされません。
使用法: 使用する場合、popstate イベントのコールバック関数を指定できます。このコールバック関数のパラメータはイベント オブジェクトであり、その state 属性は、現在の URL の PushState メソッドと replaceState メソッドによって提供される state オブジェクト (つまり、これら 2 つのメソッドの最初のパラメータ) を指します。
<a class="spa">abc.html</a>
<a class="spa">123.html</a>
<a href="/rdhub" class="spa ">rdhub</a>
// 注册路由
document.querySelectorAll('.spa').forEach(item => {
item.addEventListener('click', e => {
e.preventDefault();
let link = item.textContent;
if (!!(window.history && history.pushState)) {
// 支持History API
window.history.pushState({name: 'history'}, link, link);
} else {
// 不支持,可使用一些Polyfill库来实现
}
}, false)
});
// 监听路由
window.addEventListener('popstate', e => {
console.log({
location: location.href,
state: e.state
})
}, false)
popstate监听函数里打印的e.state便是history.pushState()里传入的第一个参数，在这里即为{name: 'history'}hash
ハッシュの基本的な概要URL にはハッシュ http:/ を含めることができます/localhost :9000/#/rdhub.html
ウィンドウ オブジェクトに onhashchange というイベントがあります。このイベントは次の状況でトリガーされます:<a href="/rdhub" class="spa">rdhub</a>
<a href="/abc" class="spa">abc</a>
<a href="/123" class="spa">123</a>
<a href="/hash" class="spa">hash</a>
document.querySelectorAll('.spa').forEach(item => {
item.addEventListener('click', e => {
e.preventDefault();
let link = item.textContent;
location.hash = link;
}, false)
});
// 监听路由
window.addEventListener('hashchange', e => {
console.log({
location: location.href,
hash: location.hash
})
}, false)ハッシュ モードと履歴モード。これら 2 つのモードはブラウザ インターフェイスを通じて実装されますが、次の点が異なります。 vue-router は、非ブラウザ環境用の抽象モードも用意しています。その原理は、配列スタックを使用してブラウザ履歴スタックの機能をシミュレートすることです。もちろん、上記は一部のコア ロジックにすぎません。システムの堅牢性を確保するために、ソース コードには多くの補助ロジックが含まれており、これも学ぶ価値があります。
pushState は、後で使用するために title 属性を追加で設定できます
単一ページ アプリケーションの場合、理想的な使用シナリオは、アプリケーションに入るときにのみindex.htmlをロードすることであり、その後のネットワーク操作は Ajax を通じて完了し、ロードされることはありません。 URL はページを再リクエストしますが、ユーザーがアドレス バーに直接入力して Enter キーを押す、ブラウザが再起動してアプリケーションをリロードするなど、特殊な状況が発生することは避けられません。
ハッシュ モードでは、ハッシュ部分の内容のみが変更され、ハッシュ部分は HTTP リクエストには含まれません:
http://rdhub.cn/#/user/id / / など 再リクエストでは http://rdhub.cn/
のみが送信されるため、ハッシュ モードの URL に基づいてページをリクエストする場合は問題ありません。
履歴モードでは、通常のリクエスト バックエンド URL と同じになるように URL が変更されます
http://rdhub.cn/user/id
この場合、リクエストをバックエンドに再送信します。 , バックエンドに /user/id に対応するルーティング処理が設定されていない場合、404 エラーが返されます。
公式に推奨される解決策は、すべての状況をカバーする候補リソースをサーバーに追加することです。URL が静的リソースに一致しない場合は、アプリが依存する同じindex.html ページが返されるはずです。ページ上で。同時に、これを実行すると、すべてのパスに対して Index.html ファイルが返されるため、サーバーは 404 エラー ページを返さなくなります。これを回避するには、Vue アプリケーションですべてのルーティング状況をカバーしてから、404 ページを与えます。または、Node.js をバックエンドとして使用する場合は、サーバー側のルーティングを使用して URL を照合し、一致するルートがない場合に 404 を返すことにより、フォールバックを実装できます。
以上がvuejsのルーティング実装原理を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。