ページをリロードせずに、URL を変更したい
HTML5 ではhistory.pushState()およびhistory.replaceState()メソッドが導入され、
それぞれにより履歴エントリの追加と修正が可能となりました。
つまり、ページをリロードせずに、ページ URL だけ変える時に使います！
history.pushState( state, title, url );
state: 変更する URL と一緒に保存するデーターオブジェクトtitle: 変更するブラウザーのタイトルを指定。Firefox ではまだ対応してないらしいので、空白（’ ‘）で指定すれば良いと思います。url: 指定した URL を履歴に追加し、URL を変更する
URL と一緒にデーターを保存することもできるので、とても便利です！ このデーターに変わるページのデーターを入れておいて、クライアント側でそのデーターを活用し、新しいページをレンダリングすれば良いです。
例えば、test.comページで、URL をtest.com/users/listにしたい場合は、以下のように指定します！
const stateObj = { hoge: 'hoge' };
const changeUrl = this.$route.path + '/users/list';
history.pushState(stateObj, '', changeUrl);こうすると、URL がtest.com/users/listに変わるだけで、ページには何も変化がありません。
少し順番を説明しますと、
history.pushState(null, '', '/hoge1');
history.pushState(null, '', '/hoge2');
history.pushState(null, '', '/hoge3');このように履歴を 3 回追加したあとに、ブラウザの戻るボタンをクリックしていくと
test.com/hoge3" → test.com/hoge2 → test.com/hoge1 → test.com
の順に、ブラウザの URL が変わっていきます。 (リロードはしないので、ページの内容は変わりません)
history.pushState()と history.repalceState()の違い
history.repalceState( state, title url );
現在の URL 履歴が書き換えられます。
要は、現在の URL 履歴が書き換えられるので、[戻る] ボタンが活性化にならず、URL だけが変わるということ。
例えば、test.comから以下を実行すると、
history.relpaceState(null, '', '/hoge1');URL がtest.comからtest.com/hoge1に変わりますが、ブラウザの戻るボタンを押しても、一つ前のtest.comには戻りません。
つまり、履歴に追加されないということ。 まとめると、、
pushState()
- 履歴に新しい URL を追加する。
test.comを一つ前の URL としておいて、新しい URL としてtest.com/hoge1を追加するということ。- そのため、前の URL が残っているので、[戻る]ボタンで
test.comに戻ることでできます。
replaceState()
- 前の URL を消して、URL を変更します。
test.comという URL 履歴を削除し、test/com/hoge1を追加するということ。- なので、ブラウザの[戻る]ボタンを押しても、一つ前の
test.comには戻りません。
その他
前のページに戻る
history.back()
これにより、ちょうどユーザーがブラウザのツールバーの「前のページに戻る」ボタンをクリックしたときのような挙動がなされます。
次のページへ進む
history.forward()
同様に、このようにすることで（ユーザーが「次のページへ進む」ボタンをクリックしたかのように）次のページへ進むこともできます。
これらの関数呼び出し後も同様に、popState イベントが発生します。