demoと結びつけてvueルーティングの実現原理を簡単に述べる

本文はdemoと結びつけてvueルーティングの実現方式を浅く述べる.ビューを更新するがページを要求しないことがルーティングの核心的な需要であり、現在ブラウザで実現するには主に2つの方式がある.

URLのhash値を利用する

html 5のhistoryメソッドhashメソッドでルーティング基本原理を基本的に実現するURLの中の#とその後ろの文字をhashと呼び、windowを通過することができる.location.hash属性読み出し

hashはURLに表示するが、httpリクエストには含まれず、サービス側には無効であるため、hashを変更してページを再リクエストやロードすることなく、基本ルーティング動作を実現することができる.
hash変更イベントの傍受:window.onhashchange = function (e) {
console.log(e.oldURL, e.newURL);
var hash = location.hash.slice(1);
document.body.style.color = hash;
}hash値を変更するたびにブラウザに履歴を追加し、ブラウザが前進/後退ボタンを持参することでアクセスできる.以上の例は、hash値の変更を傍受することによりhash値中の文字を取得し、さらにhtmlスタイルを変更するhash基本ルーティングを実現する方法の考え方である.
HTML 5 History go()back()forward()の方法で履歴スタックを表示する方法で、HTML 5から様々なジャンプ操作を行うことができます.history interfaceは、2つの新しい方法を提供する:pushState()およびreplaceState()ブラウザ履歴スタックを修正できるようにする:
history.replaceState(null,null,'');// ， replace
$('#router').html('nav')
$('a').on('click',function(){
console.log(this.text)
var text = this.text;
$('#router').html('

'+ text +'

')
history.pushState(null,null,text);
})
・例ではreplaceState()方法でhistory記録スタックをクリアし、さらにhistory.pushState()方法でurlを付与する.ここでは、この2つの方法の3つのパラメータについて簡単に説明する必要があります.最初のパラメータstate:指定したウェブサイトに関連するステータスオブジェクトで、popstateイベントがトリガーされると、そのオブジェクトがコールバック関数に入力されます.このオブジェクトが必要ない場合はnullを入力します.2番目のtitle:新しいページのタイトルですが、すべてのブラウザは現在この値を無視しているので、nullを入力できます.3番目のurl:新しいウェブサイトは、ページと同じドメイン内にある必要があります.URLには、この値の例ではpushState()メソッドによりurl値が付与されているが、サーバに再要求することなく、ルーティングホッピングの基礎が実現する.
参考文献アドレス:https://segmentfault.com/a/1190000014822765 demo github:https://github.com/lwkk1994/vuerouter-principle