APIでは、this.$routerのようにthisを介してルーターオブジェクトにアクセスをしていました。APIのsetupメソッド内ではthisにアクセスすることができません。そのため、今までとは違うアプローチからアクセスする必要があります。useRouter()・useRoute()に置き換えるルーターオブジェクトを得るためには、vue-rouerからuseRouterまたはuseRoute関数をインポートします。それぞれの関数は以下のように対応しています。},})</script>useRoute()関数から取得できるrouteオブジェクトは、リアクティブとなっています。テンプレート内では今までどおり、$router、$routeにアクセスできます。routerまたは$routeオブジェクトをreturnする必要はありません。APIの流儀にならって別のファイルに分割してみたいところです。試しに、この関数をsrc/composable/router/index.tsに配置してそこから呼び出すように変えてみましょう。},})</script>ボタンを押してみても、思いに反して反応してくれません。コンソールエラーを見てみると、どうやらuseRouter()から得たrouterオブジェクトがundefinedになっているようです。コンポーネント内ナビゲーションガードナビゲーションガードも同様に、vue-routerから関数をインポートして使います。APIにおけるbeforeRouteEnterに対応するものは提供されていないようです。