序文
フロントエンドルーティングは、AngularJS、Backbone、ReactJSなどの多くのオープンソースJSライブラリフレームワークでサポートされています。フロントエンドルーティングの原則は、バックエンドルーティングと同じです。これにより、すべてのインタラクションを可能にし、1つのページに表示して、サーバーの要求を削減し、カスタマーエクスペリエンスを向上させるために実行できます。ますます多くのWebサイト、特にWebアプリケーションは、フロントエンドルーティングを使用します。
HTML
ページにはナビゲーションメニューULがあり、結果を表示するためにDiv＃の結果が使用されます。ナビゲーションメニューをクリックすると、#Resultに異なる結果コンテンツが表示されます。
<ul> <li> <a href = "＃/"> home </a> </li> <li> <a href = "＃/product"> product </li> <li> <a href = "＃/server"> service </a> </li> </ul> <div id = "result"> </div>
JavaScript
フロントエンドルーティングの実装の短い原則について話しましょう。ハッシュフォームを使用して（History APIを使用して処理することもできます）、URLのハッシュが変更された場合、Hashchange登録コールバックがトリガーされ、コールバックで異なる操作が実行され、異なるコンテンツが表示されます。
function router（）{this.routes = {}; this.cururl = ''; this.route = function（path、callback）{this.routes [path] = callback ||関数（）{}; }; this.refresh = function（）{this.cururl = location.hash.slice（1）|| '/'; this.routes [this.cururl]（）; }; this.init = function（）{window.addeventlistener（ 'load'、this.refresh.bind（this）、false）; window.addeventlistener（ 'hashchange'、this.refresh.bind（this）、false）; }}上記のコードでは、ルーティングシステムルーターオブジェクトの実装は、主に3つの方法を提供します。
INITは、ブラウザURLハッシュアップデートイベントに耳を傾けます。
ルートは、コールバックアレイルートへのルート更新中にコールバックを保存し、コールバック関数がページの更新を担当します。
更新は、現在のURLに対応するコールバック関数を実行し、ページを更新します。
ルーターコールメソッドは次のとおりです。
クリックしてURLのハッシュ変更をトリガーし、それに応じてコンテンツを更新します。実行後、メニューをクリックするたびに、#Resultで背景色とコンテンツが変更されることがわかります。
var r = new router（）; r.init（）; var res = document.getElementById（ 'result'）; R.Route（ '/'、function（）{res.style.background = 'blue'; res.innerhtml = 'これはホームページ';}）; R.Route（ '/crodce'、function（）{res.style.background = 'orange'; res.innerhtml = 'これは製品ページ';}）; R.Route（ '/server'、function（）{res.style.background = 'black'; res.innerhtml = 'これはサービスページ';}）;要約します
上記は、フロントエンドルーティングの簡単な実装です。実際のアプリケーションでは、多数のURLの適用を満たすためにハッシュを定期的に処理する必要があります。同時に、Ajaxの非同期要求ページコンテンツの機能が追加されます。この例は非常に単純ですが、実際、多くのルーティングシステムの基礎はこれに基づいており、他のルーティングシステムは主に使用するフレームワークメカニズムをサポートおよび最適化します。さて、この記事の内容はここにあります。勉強や仕事に役立つことを願っています。ご質問がある場合は、メッセージを残してコミュニケーションをとることができます。