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

4264 ワード
ルーティングの原理は、異なるurlに従って、ページに対応するコンテンツを表示することである.ブラウザurlが変化すると、ページがリフレッシュされます.フロントエンドルーティングで問題を解決するには、urlを変更した場合、ページのリフレッシュを保証することである.
hash urlのhashが変更された場合、ブラウザはサーバに要求を送信せず、ページはリフレッシュされません.hashアプリケーションの一般的なシーン、例えば、hashによってページナビゲーションが実現される.次のコードでは、aラベル'連絡'(aラベルのhref属性値は#contact)をクリックすると、ブラウザurlがhttp://www.xxx.com/#contactになり、要素idがcontactの位置にページが配置されます.

また、urlのhashが変化すると、hashchangeイベントがトリガーされます.このイベントには、ジャンプ前のoldURLとジャンプ後のnewURLの2つの属性があります.urlフィールドを分析し、AJAXの要求に合わせてページに対応する内容を表示させることができます.
window.addEventListener('hashchange', function(event) {
  console.log('Hash changed from ' + event.oldURL);
  console.log('Hash changed to ' + event.newURL);
});

history api
html 5のhistory apiでは、更新なしでアドレスバーリンクを変更し、AJAXと連携してページの更新なしジャンプを実現できます.具体的には、ユーザがナビゲーションリンクaタグをクリックすると、ブラウザアドレスバーのurlをurlでaタグhref属性の値に変更するとともに、AJAXに合わせてデータを取得し、ページDOMの内容を置き換える.
historyはグローバル変数(window.history)として属性を継承しません.html 4規格ではhistoryには次の属性と方法があります.
  • History.lengthプロパティ:現在ロードされているページを含むセッション履歴の要素の数を示す整数を返します.たとえば、新しいタブでロードされたページで、このプロパティは1を返します.
  • History.back()メソッド:前のページに移動し、ユーザーはブラウザの左上隅の戻るボタンをクリックしてこのメソッドをシミュレートすることができます.history.go(-1).
    • に等しい
  • History.forward()メソッド:ブラウザ履歴の次のページで、ユーザーはブラウザの左上隅の前進ボタンをクリックしてこのメソッドをシミュレートすることができます.history.go(1).
    • に等しい
  • History.go()メソッド:現在のページの相対位置からブラウザ履歴(セッションレコード)からページをロードします.たとえば、パラメータが-1の場合は前のページ、パラメータが1の場合は次のページです.整数パラメータが限界を超えた場合、この方法は何の効果もなくエラーも報告されません.パラメータのないgo()メソッドや整数でないパラメータを呼び出すと効果がありません.

    • html 5規格では、historyはevent.newURL、replaceStateメソッド、およびhistory.pushState(state, title, url)イベントを追加した.
  • History.pushState(state,title[,url])メソッド:ページをリフレッシュせずにブラウズ履歴スタックの上部にステータスを追加します.pushState()には、3つのパラメータがあります.1つのステータスオブジェクト、1つのタイトル(現在は無視されています)、およびオプションのURLアドレスです.stateはオブジェクトまたはnullで、windowのpopstateイベント(window.onpopstate)がトリガーされたときにパラメータのstate属性として渡されます.pushState()メソッドのように640 kより大きいstateオブジェクトをシーケンス化して渡すと、このメソッドは例外を投げ出します.より多くのスペースが必要な場合は、sessionStorageまたはlocalStorageを使用することをお勧めします.titleはページのタイトルですが、現在のすべてのブラウザではこのパラメータは無視されています.URLはページのURLで、書かないのは現在のページです.新しいURLは現在のURLと同じソースの下にある必要があります.そうでない場合、pushState()は異常を検出します.
  • History.replaceState(state,title[,url]):現在のページの履歴値を変更し、ページをリフレッシュしません.パラメータは同じです.この変更はこのURLにアクセスしません.
  • **popstate**イベント:アクティビティ履歴エントリが変更されるとpopstateイベントがトリガーされます.アクティブ化された履歴エントリがhistory.pushState()の呼び出しによって作成された場合、またはhistory.replaceState()の呼び出しの影響を受けた場合、popstateイベントのstateプロパティには履歴エントリのステータスオブジェクトのコピーが含まれます.history.pushState()またはhistory.replaceState()を呼び出すとpopstateイベントはトリガーされません.このイベントは、ブラウザのロールバックボタンをクリックするなど、ブラウザの動作が行われている場合にのみトリガーされます.イベントを傍受し、対応する応答を行う必要がある場合、コードを組織する必要があります:
    • window.addEventListener("popstate", function(e) {
    var state = e.state;
    // do something...
});

    【1】https://juejin.im/post/5aebc4a26fb9a07acc11924d
    【2】https://www.renfei.org/blog/html5-introduction-3-history-api.html
    【3】https://hijiangtao.github.io/2017/08/20/History-API-and-Location-Object/
    【4】https://developer.mozilla.org/zh-CN/docs/Web/API/History
    iOS友盟エラー分析
    Reactで配列のメソッドを使用する際に注意すること(push)