Nuxt3: /aaa/[id]/bbb みたいな動的ルーティングでハマった話
記事の編集画面を追加した際に、動的ルーティングがうまくいかず、記事詳細画面が表示されてしまうということが起きたので書き留めておきます。
事象
やりたいこと
記事詳細画面URL：/articles/:id
記事編集画面URL：/articles/:id/edit
/articles/:id/edit にアクセスした際に、記事詳細画面が表示されてしまいました。
編集画面が開けないパターン。
.
├── articles
│ ├── [id]
│ │ └── edit.vue
│ ├── [id].vue
│ └── create.vue
編集画面が開けるパターン
.
├── articles
│ ├── [id]
│ │ ├── edit.vue
│ │ └── index.vue
│ └── create.vue
[id].vue としていたファイルを[id]ディレクトリに入れて、index.vueにリネームしてあげる
これで解決できました。