Nuxt.jsで遷移してもビューを変更しないか、遷移せずにリンクを変える方法

Question

今作っているもの

Nuxt.jsでwebアプリを作っていて、モーダルウィンドウを実装しています。

やりたいこと

モーダルウィンドウを表示するときにリンクは変えたいのですが、背景は変えたくないので、遷移してもビューを変更しないか、リンクは変えても実際には遷移しない方法を探しています。

言葉にするととてもわかりにくくなってしまいましたが、PC版のツイッターのツイートのモーダルウィンドウのようなものを作りたいだけです。

最後に

見当もつかず、検索しても出てこなかったので質問させていただきました。
上記の方法ぐらいしか思いつきませんでしたが、他にこれを解決できる方法がありましたら何でも教えていただけるとありがたいです。

Answer 1

historyオブジェクトを利用してはどうでしょうか。(ブラウザの履歴を操作する)
historyオブジェクトで履歴のみモーダルページのURLに変更しモーダルを表示させる手法です。
Vue-routerではリロードもしてしまうので注意してください。

<script>
export default {
  methods: {
    openModal() {
      window.history.pushState(null,null,"/modal/");
　　　/* クエリを変更する場合
      window.history.pushState(null,null,"./?modal=1"); */
    },
    closeModal() {
      window.history.go(-1);
    }
  }
}
</script>

URLを別ディレクトリに変更する場合、直接遷移された時を考えてそのURLにはモーダルを表示したデフォルトのページを用意しておく必要がありそうです。

Comments

[Kosei]

これで解決できそうです。

実際にツイッターでもモーダルを閉じると前の履歴に戻ってますね。
しかも、Nuxt.jsではリロードされませんでした。
おそらくこれは、
https://router.vuejs.org/ja/guide/essentials/history-mode.html
にあるようにhashモードではなくhistoryモードになっているんでしょうね。
Nuxt.jsで仕組みなどを理解せずにやっていたので勉強になりました。

ありがとうございました。