vue-router の原理の簡単な紹介

vueルーターの原理

vueルーターの原理

vue-router は vue プロジェクトの重要な部分であり、単一ページのアプリケーションを構築するために使用されます。

シングルページアプリケーションはルーティングとコンポーネントに基づいており、ルーティングはアクセスパスの設定とコンポーネントへのパスのマッピングに使用されます。

ルーティングの本質は、URL とページ間のマッピング関係を確立することです。

実装原則: vue-router の原則は、ページを再リクエストせずにビューを更新することです。

詳細については、WeChat で「 前端爱好者」を検索し、「私」をクリックしてご覧ください。

vue-router は、mode パラメーターを使用して、ハッシュモード、ヒストリーモード、および抽象モードの3 つのモードに設定できます。

ハッシュモード

ハッシュモードは vue-router のデフォルトモードです。

ハッシュとは URL トレースポイントを指します。トレースポイントが変更された場合、ブラウザはアクセス履歴を変更するだけで、サーバーにアクセスしてページを再取得することはありません。

したがって、描画ポイント値の変化を監視し、描画ポイント値に応じて指定した dom を描画することができます。

実施原則

描画点を変更する

location.hash = "/hashpath"を通じてブラウザのハッシュ値を変更できます。

トレースポイントの変化を監視する

hashchange事件モニタリングによりハッシュ値の変化を監視できます。

window.addEventListener('hashchange', () => {
    
    
   const hash = window.location.hash.substr(1)
   // 根据hash值渲染不同的dom
})

Push が呼び出されると、新しいルートがブラウザのアクセス履歴スタックの先頭に追加されます。

replace を使用する場合は、ブラウザのアクセス履歴スタックの最上位のルートを新しいルートハッシュの値 (URL およびその後のコンテンツの # に等しい) に置き換えます。

ブラウザは、ハッシュ値の変更に基づいて、対応する DOM の場所にページを読み込みます。

アンカーポイントの変更はブラウザの動作であり、アンカーポイントが変更されるたびにブラウザ内に履歴が残り、ブラウザの戻るボタンで前の位置に戻ることができます。

履歴モード

ハッシュモードでは、URL は次の形式になります。

http://localhost:8080/index.html#/book?bookid=1

上記の URL には # と ? が両方あり、URL が奇妙に見えます。そのため、履歴モードを使用できます。このモードでは、URL は次のようになります。

http://localhost:8080/book/1

実施原則

URLを変更する

H5 の履歴オブジェクトには、pushStateとのreplaceState2 つのメソッドが用意されています。これら 2 つのメソッドが呼び出されると、URL が変更され、ブラウザのアクセス履歴も変更されますが、ブラウザはバックグラウンドにリクエストを送信しません。

// 第一个参数：data对象，在监听变化的事件中能够获取到
// 第二个参数：title标题
// 第三个参数：跳转地址
history.pushState({
    
    }, "", '/a')

URLの変更をリッスンする

popstate履歴の変更は、ブラウザの進むまたは戻る機能がクリックされたときにトリガーされるリスニングイベントを通じて監視できます。

window.addEventListener("popstate", () => {
    
    
    const path = window.location.pathname
    // 根据path不同可渲染不同的dom
})

抽象的な

ブラウザのアドレスに関連するレコードは含まれません。

プロセスはハッシュモードと同じで、シミュレートされたブラウザーの履歴スタックは配列を介して保持され、サーバー側で使用されます。

ブラウザに依存しないブラウザ履歴仮想管理バックエンドを使用する

ハッシュモードとヒストリーモードの違いは何ですか?

URLが違います

ハッシュルートにはアドレスバーの URL に「#」が付いていますが、履歴ルートには付いていません。

原則が異なります

hashchangeハッシュは、履歴スタックの変更を監視し、ブラウザ履歴スタックのルーティングをに置き換えるために使用されます新的 hash。
ブラウザは、ハッシュの変更に基づいて、対応する DOM の場所にページを読み込みます。

履歴はwindow.onpopstateアドレスバーを監視し、それを使用してpushState()、replaceState()履歴スタックを変更し、ページにジャンプせずに URL をロードできるようにします。

彼が抱えている問題の 1 つは、ページを更新するとバックエンドルートが使用されるため、URL がリソースと一致しない場合にページに戻らないようにするためにサーバーの支援が必要なことです。

他の

Hash は一部の下位バージョンのブラウザをサポートしますが、history はサポートしません。

要約する

ハッシュルートは、アドレスバーの URL に # が付いており、window.location.hashで読み取ることができます。歴史ルートがないので見栄えが良くなります。
Enter キーを押して更新すると、ハッシュルートはアドレスバーに対応するページにロードされますが、履歴ルートは通常 404 エラー ( 刷新是网络请求，没有后端准备时会报错 ) を報告します。
ハッシュルーティングは、下位バージョンのブラウザをサポートしますhistory路由是HTML5新增的API 。
ハッシュの特徴は、URL には表示されますが、http リクエストには含まれないため、バックエンドには影響を与えず、ハッシュを変更してもページがリロードされないため、これも単一のリクエストには必須です。ページアプリケーション。
履歴はブラウザの履歴スタックを使用します。back,forward,go 以前からメソッドはありましたが、 HTML5 で新しいメソッドが追加されましたpushState（）和replaceState（） 。それらは履歴を変更する機能を提供します。ただし、変更を行う場合、現在の URL は変更されますが、ブラウザのリクエストは行われませんすぐにバックエンドに送信されます。
history的这种模式需要后台配置支持 。たとえば、プロジェクトのホームページにアクセスすると、すべてが正常でアクセスできますが、ページを更新したり、パスに直接アクセスすると、404 が返されます [ 那是因为在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我直接在浏览器里输入这个地址的时候，就一定要对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404]

履歴を拡張すると404エラーが発生する

1: ハッシュモードでは、http://www.abc.com など、ハッシュ記号の前のコンテンツのみがリクエストに含まれるため、バックエンドでは、ルーティングが完全にカバーされていない場合でも、 404 エラーを返します。

2: 履歴モードでは、フロントエンドの URL は、実際にバックエンドへのリクエストを開始する URL と一致している必要があります。http://www.abc.com/book/id など。バックエンドに /book/id のルーティング処理がない場合、404 エラーが返されます。

問題が解決しました：

404 エラーの解決策: オンラインで紹介されている多くの方法は機能しません。URL 書き換えモジュールをインストールし、書き換えルールを構成して、index.html を指定するか、URL 書き換えによって生成された web.config ファイルを Web サイトのルートディレクトリに直接配置します。

参考資料

https://v3.router.vuejs.org/zh/installation.html
https://www.cnblogs.com/ifon/p/15881223.html
https://zhuanlan.zhihu.com/p/584365427
https://www.php.cn/faq/490021.html
https://segmentfault.com/a/1190000023662742