【Nuxt.js v2】ルーティングの設定(pages配下のディレクトリ構成)

動的ルーティング

以下はユーザーIDをパスにユーザープロフィールページが表示されるようなパターン

パス

/001

ディレクトリ構成

pages
 └ _id.vue

多階層のパス

パス

/posts → 投稿一覧ページ
/posts/001 → 投稿詳細ページ
/posts/001/comments → コメント一覧ページ

ディレクトリ構成

pages
 └ posts
    ├ index.vue
    └ _id
       ├ index.vue
       └ comments.vue

親子関係のあるコンポーネント

親ページ(以下例のmypage.vue)で<nuxt-child />を使って子ページを挿入できる。
layoutとpageの関係と同じように、パスによってコンテンツ部分のみ差し替わる。

パス

/mypage → マイページ
/mypage/posts → 自分の投稿一覧ページ
/mypage/setting → 設定変更ページ

ディレクトリ構成

pages
 ├ mypage.vue
 └ mypage
    ├ posts.vue
    └ setting.vue