Nuxt.jsの動的でネストされたルート補足

これは何？

• 公式ドキュメントの動的でネストされたルートが分かりにくかったので、その補足です。

実現したいrouting

• users/ => ユーザー一覧
• users/:id => ユーザー詳細
• users/:id/posts => ユーザーの投稿一覧
  • これが今回実現したかったこと

結論

↓のように配置することで実現出来ました。

pages/
--| users/
-----| index.vue
-----| _id.vue
-----| _userId/
--------| posts/
----------| index.vue

蛇足

• pages/users/_userId/の _userId/のフォルダ名は先頭に_がついてれば何でもいい
• 公式では_slug/となっていて英語力が足らず混乱しましたが何でもいいというニュアンスを伝えたい模様？
• _userIdのフォルダ名がそのままvalidateなどのparams.userIdのようなparam名になる
• pages/users/index.vueはpages/_users.vueでもいい
  • pages/users/*がすべてpages/_users.vueにルーティングされてしまう模様
  • index.vueを使いましょう