ITの隊長のブログ

ITの隊長のブログです。Rubyを使って仕事しています。最近も色々やっているお(^ω^ = ^ω^)

SPAの戻るボタンとブラウザの戻るボタンをあわせる

スポンサードリンク

Nuxtでページを移動するとき、下記のようにします。

this.$router.push({path: '/about'})

で、移動したのちの戻り方ですが、History APIを利用します。

window.history.back()
// または
// window.history.go(-1)

これでおk.

また、URLは変えたいけど、ページは遷移したくないときは下記のようにしましょう。

window.history.pushState(null, null, '/about')

ちなみに、Nuxtのrouter.pushはhistoryに書き込んでくれるようなので、自分でpushStateする必要はありません。(僕はSPAでは必至と勘違いしてたので、戻るボタンを2回押さないと戻れないという謎挙動にハマった)

参考URL

blog.maxpace.tech

developer.mozilla.org

teratail.com