簡易ルーティングの実現――(historyルーティング)

HistoryはHTML 5の新しい標準で、hashの展示よりも優雅ですが、低バージョンieには互換性の問題があります.HistoryのpushStateでは、replacestateメソッドが変更履歴を追加し、新しいサーバリクエストを送信しないため、このプロパティを使用してフロントエンドルーティングジャンプを実現できます.Historyのgo,back,forwardメソッドでは,ジャンプ,後退,前進機能,popstateイベントで記録変更を傍受できる.ページ構造aラベルはページページジャンプを引き起こすため、ページ構造を書き換える必要があり、プラグインメソッドを使用してルーティングジャンプを行う
月曜日火曜日水曜日木曜日金曜日実装historyルーティングinit()はMDN上でpopstateの
アクティビティ履歴エントリが変更されるとpopstateイベントがトリガーされます.アクティブ化された履歴エントリがhistory.PushState()の呼び出しが作成されたか、history.replaceState()の呼び出しの影響popstateイベントのstateプロパティには、履歴エントリのステータスオブジェクトのコピーが含まれます.注意すべきはhistoryを呼び出すことです.义齿replaceState()はpopstateイベントをトリガーしません.このイベントは、ブラウザのロールバックボタン(Javascriptコードでhistory.back()またはhistory.を呼び出す)をクリックするなど、ブラウザの動作時にのみトリガーされます.forward()メソッド)ブラウザによってページのロード時にpopstateイベントを処理する形式が異なります.ページのロード時にChromeとSafariは通常popstateイベントをトリガーしますが、Firefoxはトリガーしません.
したがって、historyルーティングの初期化方法では、popstateおよびloadイベントをリスニングするexport default class HistoryRouter extends RouterParent{constructor(routerConfig){super(routerConfig)}

init() {
    // refresh                
    // bind(this)        ，  this     
    window.addEventListener('popstate', this.refresh.bind(this), false);
    window.addEventListener('load', this.refresh.bind(this), false);
}

}refresh()はhashルーティングと一致し,ここではコンポーネント制御表示非表示であるが,ここではhistoryの機能を直接使用することができる.ジャンプrefresh(){let path=window.location.pathname,currentComponentName=',nodeList=document.querySelectorAll('[data-component-name]);//現在のルーティングの名前for(let i=0;i { if (item.dataset.componentName === currentComponentName) { item.style.display = ‘block’; } else { item.style.display = ‘none’; } }); } back()&&front()を後退してhistoryのapiを直接呼び出すとpopstateイベント呼び出しrefreshメソッドレンダリングページback(){window.history.back()}がトリガーされます.front() { window.history.forward(); } push(option)vue-routerでは、path、nameで現在のルーティングを変更でき、queryパラメータを携帯できるのでpathを優先的に判断し、pathがあればpushStateを直接呼び出して履歴を追加する.pathがない場合は、nameに基づいてroutesからpathを見つけ、pushStateを呼び出して履歴を追加します.なぜなら义齿replaceState()はpopstateをトリガーしないので、refreshメソッドpush(option){if(option.path){//this指向を手動で呼び出し、関数がクラスを呼び出すことができるメソッドpushHistory.call(this,option.path,option.query)}を呼び出す必要があります.else if(option.name){let routePath=';//ルーティング名に基づいてルーティングpath for(let i=0;i//ルーティングジャンプfunction pushHistory(routePath,query){let path=getTargetPath(routePath,query);if(path!==window.location.pathname){window.history.pushState(path,',path);this.refresh()}}
function error(message) { typeof console !== ‘undefined’ && console.error( [html-router] ${message} ); }
//ジャンプするパスfunction getTargetPath(path,query){if(!query)return path;let str=';for(let i in query){str+='&'+i+'='+query[i];}return path + ‘?’ + str.slice(1); }
replace(option)replaceとpushの論理は基本的に一致しているが,pushStateではなくreplaceStateメソッドが呼び出されるだけである.そこでpushメソッドを改造してreplace replace(option){//現在replace this.replaceRouter=true;this.push(option);push(option) { if (option.path) { pushHistory.call(this, option.path, option.query, this.replaceRouter); } else if(option.name){let routePath=';//ルーティング名に基づいてルーティングpath for(let i=0;i//書き換えルーティングジャンプfunction pushHistory(routePath,query,replace){let path=getTargetPath(routePath,query);if(path!==window.location.pathname){if(replace){window.history.replaceState(path,’,path);this.replaceRouter=false;}else window.history.pushState(path, ‘’, path); this.refresh(); } } demoテストテストコードは書かず、前文hashルーティングと一致し、効果は以下の通りである.
しかし、ここで問題が見つかりました.あるルーティングでページがリフレッシュされると、次のような状況になります.
更新すると404が表示され、vue-routerの公式ドキュメントにも紹介されています.historyを開くにはサービス側のサポートが必要です.
historyモードを使用すると、URLは通常のurl、例えばyoursiteのようです.com/user/idも、きれいですが...このモードはよく遊ぶには、バックグラウンド構成のサポートが必要です.私たちのアプリケーションは1ページのクライアントアプリケーションなので、バックグラウンドが正しく構成されていない場合は、ユーザーがブラウザでoursiteに直接アクセスします.com/user/idは404に戻ります.これは面白くありません.だから、サービス側にすべての状況をカバーする候補リソースを追加します.URLが静的リソースに一致しない場合は、同じindexを返すべきです.htmlページ、このページはあなたのapp依存のページです.