VueRouterにおいて「Number型」パラメータを遷移先コンポーネントへ渡すには？

Question

#前提事項
現在、Laravelとvueを組み合わせたアプリを作成しています。初学者です。

#解決したいこと
VueRouterにおいて、パラメータ（数値型）つきURLを受け取り、そのパラメータを遷移先のコンポーネントへ渡したいのですが、エラーになるため解決したいです。

#試したこと
ステップ１

{
 path: '/mypage/:id/groups',
 name: 'GroupList',
 component: GroupList,
 props: true
}

この書き方だと、遷移先のコンポーネントへパラメータ「id」を渡すことはできるのですが、数値型ではなく文字列が渡ってしまいます。

ステップ２

{
 path: '/mypage/:id/groups',
 name: 'GroupList',
 component: GroupList,
 props: route => ({
  id: Number(route.psrams.id)
 }),
},

この場合、エラーとなります。

以下参考記事

・VueRouter基本ルーティング記法まとめ
https://www.ritolab.com/entry/181

・ルートパラメータを数値として渡すには?

以下エラー内容

Error in render: "TypeError: Cannot read property 'id' of undefined"

色々と検索して模索してみましたが、解決策が見つからないので、同じ現象に遭遇したことがある方、もしくは何か原因に関してお心当たりのある方いらっしゃいましたら、解決方法に関してアドバイス頂けないでしょうか？

Answer 1

タイポだと思われます。

{
 path: '/mypage/:id/groups',
 name: 'GroupList',
 component: GroupList,
 props: route => ({
--   id: Number(route.psrams.id)
++   id: Number(route.params.id)
 }),
},

Comments

[kodokuna_dancer]

回答ありがとうございます。やはりタイポミスなようで、無事解決することができました。こんな質問に時間を取らせまして大変失礼致しました。感謝します。