VueのRouterでURLのパラメータの型をstringから変更する

例えばユーザーデータ更新APIリクエストでURLのIDとか使って引数に渡す時に,

this.$route.params.userId

↑みたいに取得するとstringでしか受け取れず
毎回number型に変更するのが冗長な気がしてたので
router側で変更する方法ないかなぁって調べたけど
なかなか出てこなかったけどやっと見つけたのでメモ

修正前

修正前のrouterでの設定が↓だとして,

{
  path: 'userEdit/:userId',
  name: 'userEdit',
  component: () => import('./views/UserEdit.vue'),
},

修正後

propsという項目でパラメータの型を変更することができる
routerから先にparamsを取り出して,キャストしてpropsにセットするというやり方

{
  path: 'companyList/:companyId',
  name: 'companyEdit',
  component: () => import('./views/CompanyEdit.vue'),
  props: (route) => ({userId: Number(route.params.userId)}),
},

コンポーネントでの受け取り方

後はコンポーネントでPropで受け取るだけ
自分の環境だと↓で受け取れる

@Prop()
private userId!: number;

意外にもクソ簡単だった。。。。。

おわり

参考資料

VueRouter基本ルーティング記法まとめ