あなたが知っておく必要があるかもしれないルートのフロントエンドのコンテンツ

何をルーティングしている？ルーティングは、ルートが表示されるのフロントエンドの前に達成され、どのように？
フロントエンドルーティング
ハッシュルーティング
歴史ルーティング
フロントエンドの欠点をルーティング

概要

テキストの前に書かれた：フロントエンドCRUDの少年は、2年前から取り組んできたとして、あなたは一日中ダイビング大物がチャットを参照してください、極端な賞賛を表明し、あなたも、この目的のためにチット・チャットフォーラムで軍に参加したい、正式に開始することを決定チットチャット - 書き込みは、自分の能力を発揮し、彼が書き込みを主張することができると思います。私たちは、昇進の機会に私の兄、弟を修正するためにあなたに見て

何をルーティングしている？ルーティングは、ルートが表示されるのフロントエンドの前に達成され、どのように？

簡単に言えば、ルートは、マッピングサーバリソースへのブラウザのURLにあり、リアルーティング要求は、それぞれ異なるユーザーurlで発行され、コンテンツサーバは、要求に応じて特定のリソースに必要な処理がクライアントに返された後、リソースは、治療後のリターンが直接静的なhtmlファイルには、次の手順を表示します一般の各変化のURLを表示することができ、多くの場合、次のとおりです。

ブラウザのリフレッシュ要求。
サーバーは、ポート80（または443）がパスを超える要求があると、URLが解決されるに耳を傾け、
ルーティングサーバーの構成によれば、データはテンプレートファイルそれらにレンダリングされ、その後、ブラウザに返され、対応するHTMLテンプレートと必要なデータを見つけます。
データを解釈する方法を決定するためにパケットのContent-Typeに基づくブラウザ。

バックエンドの分離の概念は前に現れるずっと前に、ルートの後端部には、唯一のルート選択ページでは、ちょうど彼らの "カットの計画所得者の作業を行う必要がある前に確保背面に静的リソースとテンプレートファイルを提供する、あります最後に、しかし、閲覧経験需要の高まりだけでなく、ブラウザのパフォーマンスを高めるために、それは次のような質問をルーティング、いくつかのバックエンドがあることが発見されました。

ページがスマンは、ユーザーが唯一の時間の期間にわたって黒と白が表示されます場合は、再申請する必要があること、すべてのジャンプ手段でのリソースへのリンク。
個人的に私はすべての時間を提示することができかもしれ異なるページのページジャンプニーズをリフレッシュすることを意味し、より多くの重要な点は、それは、巨大なプロジェクトシーンのユーザーの膨大な量で、繰り返しリソース要求を送信すると、サービスに大きな負担が発生しますと感じます資源の再利用は、サーバリソースの無駄が生じ、再要求されます。

上記の問題点を解決するために、機知に富んだプログラマが見つけ、前方のフロントエンドルーティングの概念を置きます：

フロントエンドルーティング

すべてのページの内容は、ルートの先端が再レンダリングページの背景に再送信テンプレートファイルにせずに達成されるようにする場合、最初のページが開かれることを期待して、ブラウザのジャンプのURLを作ることですか？上記の要求の痛みのポイントを解決する方法ローカル要求する必要テンプレートファイルと対応するコンテンツリソース、ブラウザはまず、最初のHTMLテンプレートをレンダリングして、指定された間のDOMページのレンダリングに対応するURL URLのWeb API、コンテンツやリソースを聞くことによって変更を実装します。

上記の要件によると、ブラウザAPIまたはプロパティの要件を満たすためには、2つの特性を満たしている必要があります。

コールAPIは、この属性を修正または変更すると、ブラウザがサーバーに新しい要求を送信しません。
あなたは、前方または後方の機能を使用すると、URLの改正及び改訂ブラウザが履歴スタックそれらに取得されるように保存することができます前に、
URL変更操作は、操作をカスタマイズするために、コールバック関数を使用するためにイベントリスナーによって達成することができます。

質問はどのようにそれが最善のURL切り替えることができますが、ブラウザは仕方よる？要求を再送信しません、ですので、ルートのフロントエンドは、歴史をルーティングし、ルーティングハッシュに分割されています

ハッシュルーティング

URLサイトには、対応するウェブページが見つからない場合、それはもともと、DOMに対応する位置を変更することによって、URLをブラウザのスクロールにサイトのコンテンツハッシュの位置を特定するために設計された、アンカーの重要な部分であるハッシュが含まれていますハッシュ・アンカーは転がり表示されません、ハッシュの変更はpopstateイベントをリッスンして処理することができるので、この機能はルートのフロントエンドのニーズに最適である、いくつかの記事を行うために使用することができます

ここでは、ハッシュのためのルートがあり、閲覧を容易にするために、私はプッシュに似たVUE-ルータを達成する、簡単にできるスクリプトタグをコピーして、すべてのバニラのJSがコンパイルせず、可能な限り、書き込みが使用しようとすると、行く、他の操作を置き換えます

//这里需要你在html中创建一个id为app的dom用于放置内容
var appNode = document.querySelector("#app");
window.addEventListener("hashchange", () => {
  Router.hash.handler();
});
var Router = {
  //list = 路由列表, 模仿vue-router中的routerlist写法, component做了简化只是一段文字;
  list: [
    { path: "/", name: "index", component: "This is index page" },
    { path: "/hash", name: "hash", component: "This is hash page" },
    { path: "/history", name: "history", component: "This is history page" },
    { path: "*", name: "notFound", component: "404 NOT FOUND" }
  ],
  //输入path:String对应路由列表中的path, 实现渲染功能
  render: function(path) {
    var ele = null;
    //用于存储没有匹配路径时的404内容, 在这里默认路由列表中最后一个元素为404内容
    var naEle = this.list[this.list.length - 1];
    //通过path找出路由列表中对应的路由信息
    this.list.forEach(item => {
      if (item.path === path) ele = item;
    });
    //如果找到了path对应的路由信息, 则返回; 没找到的话, 返回404信息
    ele = ele ? ele : naEle;
    //将路由信息中的component加载进根节点
    appNode.innerHTML = ele.component;
  },
  hash: {
    //渲染
    handler: function() {
      Router.render(this.getState());
    },
    //获取当前hash
    getState: function() {
      var hash = window.location.hash;
      hash = hash ? hash.slice(1) : "/";
      return hash;
    },
    getUrl: function(path) {
      var href = window.location.href;
      var i = href.indexOf("#");
      var base = i >= 0 ? href.slice(0, i) : href;
      return base + "#" + path;
    },
    push: function(path) {
      window.location.hash = path;
    },
    replace: function(path) {
      window.location.replace(this.getUrl(path));
    },
    go: function(n) {
      window.history.go(n);
    }
  }
};
//加载初始页面
Router.render(window.location.hash ? window.location.hash.slice(1) : "/");

これらは、単純なハッシュルータ実装された入力Router.hash.pushコンソール（「/履歴」）またはRouter.hash.replace（「/ハッシュ」）またはRouter.hash.goを操作することができる（-1）私はこれらの操作のための身近なVUE-ルータジュニアパートナーは奇妙なことではないだろうと信じて

歴史ルーティング

：ハッシュルータはこれで満足に見える小さなパートナーの想像力、しかし、利用者への（K）§体の経験（I）の改善のすべてのルートのために私たちのフロントエンドを満たしているように思わも醜いURLバーにこの＃上この目的のために、機知に富んだフロントエンドプログラマはまた、新しいAPIのWeb APIドキュメントで見つかった、歴史シリーズは2つのAPIがありますreplaceState、pushStateもpopstateイベントのための要件を変更する要求を送信URLを満たしていませんそれを履歴スタックの変化を監視することが可能であるが、ピットはイベント自体ではないことに注意がreplaceState、pushStateトリガーことpopstateが、それは私たちがプログラマーウィットビート、replaceState、pushStateは同じようにURLを変更し、我々まだ現在必然的に、history.go APIまたは転送をクリックして戻って更新ボタンをだろう呼び出すが、すぐに空に現れた暗い雲のいくつかの作品がありますが、APIのトーンレンダリング機能がそれたinvoke手動ですることができたときに、すべてが解決されているようですURL要求が、URLが変更された原因に、この時間は、完全に例にバックグラウンドでのルーティング機能に適合していません現在の要求の下でのみ、赤404を返すことができますが、残念ながらスタック全体の実施形態の唯一のフロントエンド今回は、いくつかの適応を行うには、サービス要求の終了時に、ときurlは、一般的には、それが404でないことを確認するために一定のルールを満たしていません、リソースは、最初の要求に復帰するために必要とされるとき

ので、少し友人のindex.htmlと同じフォルダにローカルサービスのhttpサーバまたはWebPACKので遊ぶことができ、///パス：ファイルで使用することはできませんpushState APIのURLの制限のためので、以下では、達成するためのコードの歴史ですWebPACKのローカルサービスとtrueにhistoryApiFallbackセットでdevServerと遊ぶことができる404人の少し友人を防ぐために、あなたはindex.htmlをに移転要求を行うためのリソースを見つけることができません。あなたが404例を気にしない場合はポイントレースのコードを実行するために、そして、まだ直接メソッドを使用して、スクリプトタグのコードをコピーし、HTMLファイルを編集して、ハッシュコードは、コンソール入力Router.history [FN]と同様に、単に通話モードであることができます

var appNode = document.querySelector("#app");
window.addEventListener("popstate", () => {
  Router.history.handler();
});
var Router = {
  list: [
    { path: "/", name: "index", component: "This is index page" },
    { path: "/hash", name: "hash", component: "This is hash page" },
    { path: "/history", name: "history", component: "This is history page" },
    { path: "*", name: "notFound", component: "404 NOT FOUND" }
  ],
  render: function(path) {
    var ele = null;
    var naEle = this.list[this.list.length - 1];
    this.list.forEach(item => {
      if (item.path === path) ele = item;
    });
    ele = ele ? ele : naEle;
    appNode.innerHTML = ele.component;
  },
  history: {
    //渲染
    handler: function() {
      Router.render(this.getState());
    },
    //获取当前path
    getState: function() {
      const path = window.location.pathname;
      return path ? path : '/';
    },
    //pushState相关参数说明
    //状态对象（state object）：一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，会触发popstate事件，并能在事件中使用该对象。
    //标题（title）：一般浏览器会忽略，最好传入null。
    //地址（URL）：就是需要新增的历史记录的地址，浏览器不会去直接加载改地址，但后面也可能会去尝试加载该地址。此外需要注意的是，传入的URL与当前URL应该是同源的。
    push: function(path) {
      window.history.pushState(null, null, path)
      this.handler()
    },
    replace: function(path) {
      window.history.replaceState(null, null, path)
      this.handler()
    },
    go: function(n) {
      window.history.go(n);
    }
  }
};
//加载初始页面
Router.render(window.location.pathname);