VueでSPAの開発をしています。
複数のルートに同一のURLを持つモーダルを実装したときの、ブラウザバックの挙動が思うようにいかずに悩んでいます。
例としては/top /bookmark /random
といったルートを持つページから、同一の内容・URLを持つモーダルを閲覧できます。
モーダルのURLは内容を取得して表示する際に、window.history.pushStateで追加しています。
加えてモーダル内では、下記のように別のURLを持つモーダルに内容を更新できるようになっています。
/modal/1 → /modal/2 → /modal/3
モーダルですので、モーダル内でどれだけ移動しようとも閉じれば元々見ていたページに戻る仕様になっています。
また直接モーダルのURLにアクセスした際にも内容が表示されるように、/modal/:num とルートを与えています。
このとき、ブラウザバック時にpopstateイベントで前ページの状態を復元しているのですが、ルートが変わるせいで画面遷移してしまいます。
/modal/1 → /modal/2 → /modal/3→ ブラウザバック →/modal/2
という操作時に、元のページに重ねたまま戻りたいのですが、ブラウザバックをすると直接アクセス時の無背景の画面に移動してしまいます。
モーダルが/topだけにあるなら、モーダルのルートをネストすることで思い通りの挙動になるのですが、実際にそうすると/bookmarkでブラウザバック時にモーダルの背景が/topになる、といった挙動になってしまいます。
ブラウザバックをしても画面遷移することなく、モーダルが元々見ていたページ上に保たれるにはどうしたらいいでしょうか。
あなたの回答
tips
プレビュー