画像を表示している時に、戻るボタンで前に戻らないようにしてほしい

[Khsmty]

Summary

つい癖で画像を閉じる際に戻る操作をしてしまい、前のページに戻ってしまい地味にストレスです。
ブラウザの戻る操作をした時に、前のページに戻らずに画像を閉じるようにしてほしいです。

少し試してみて、画像は以下のコードで閉じれそうだったのですが
戻る操作をいい感じに打ち消す方法がわかりませんでした。
どなたか頭のいい方がいらっしゃれば助言ください。

window.addEventListener('popstate', () => {
  if (lightbox.pswp && lightbox.pswp.isOpen) {
    lightbox.pswp.close();
  }
});

[momoirodouhu]

Vue環境で推奨されるかわかりませんが
history.pushState(null, null, null);
で無の履歴を追加できるので一度だけ打ち消せたはずです
ただ、別の方法(例えば下スワイプ)で閉じたときに残るので注意

[Khsmty]

URL にハッシュを付けることでなんとかなりました

[syuilo]

履歴を操作する方法だと

Aページ->Bページ→Aページ(ブラウザバック)と遷移してきた状態で一度でも画像を開いてしまうとBに(→クリックで)戻れなくなる

ことが発生するのはデメリットかも
ただ履歴操作以外の方法はなさそうだけども