Vue3で特定のページ遷移を制限する方法

はじめに

ブラウザの戻るボタンで前のページに戻って欲しくない場面がありました。その時の解決方法を記録します。

解決方法

Navigation Guardを使いました。
以下は支払いページから(/payment)から支払いページ(/payment-complete)　に戻らないように制限する例です。

index.ts

router.beforeEach((to, from, next) => {
  if (from.path === "/payment" && to.path === "/payment-complete") {
    next(false);
  } else {
    next();
  }
});