Madea-K Dev

プログラムのメモや日々思ったことなど

< 35歳迄に起業し1000万円以上稼ぐ >

nuxt-child

nuxt-childのルート設定

上記の pages/index.vue を見てみます

asyncDataメソッドを使用して users[] のデータを取得し、そのまま users を HTML に返し user.name を一つずつ出力しています
ここで出力されたリンクテキストは、それぞれ pages/_id.vue に結びつきます

また下記 nuxtChild が定義されていた場合

そのコンポーネントに切り替わるのではなく、NuxtChild にて該当のデータが出力されます

[注意点]
pages/index/ が存在する場合、リンクの遷移先は pages/_id.vue より pages/index/_id.vue が優先されます

名前付きビュー

次に 名前付きビュー を見ていきます

独自のルート設定には「extendRoutes」を使用します
https://ja.nuxtjs.org/api/configuration-router/#extendroutes

extendRoutesにて設定されたコンポーネントの名前が NuxtChild の名前に紐づきます
extendRoutesの設定は nuxt.config.js から行ないます

コンポーネントに設定されている下記ルートと名前属性によって

<NuxtChild name="left" />に紐付けることが出来ます

また NuxtChild は該当の親コンポーネントにて表示させることが出来ます
https://nuxtjs.org/api/components-nuxt-child

<Nuxt name="nuxt-child" />の場合は layout/page 内にて使用できます
https://ja.nuxtjs.org/guide/routing/#%E5%90%8D%E5%89%8D%E4%BB%98%E3%81%8D%E3%83%93%E3%83%A5%E3%83%BC

このように NuxtChild を使用することで、一つの親コンポーネントに対して複数の子コンポーネントを条件に合わして使用することが出来ます

参照 :
https://ja.nuxtjs.org/api/components-nuxt-child

/ Vue-Nuxt

×