nuxt.jsでネストされたルートのtransitionでつまづいたこと

2018年11月19日

next.jsでネストなしのルートはtransitionが機能するのにネストしたページの場合transitionが機能しない現象につまづいたのでそのメモです。

transitionが機能する場合の構成

pages/
--| about.vue
--| users.vue
--| index.vue

pageにabout.vue,user.vue,index.vueが作られていてこの場合は
index.vue<->user.vue<->about.vueのページ遷移がtransitionが機能してくれます。

transitionがうまく機能しない場合の構成

pages/
--| about.vue
--| /user
----| index.vue
--| users.vue
--| index.vue

userフォルダを作ってその中にindex.vueを作った状態です。

ネストしたルートの作り方は次のように公式にありました

Nuxt.js では vue-router の子ルートを使ってルートをネストさせることができます。

ネストされたルートの親コンポーネントを定義するには、子ビューを含む ディレクトリと同じ名前 の Vue ファイルを作成する必要があります。

警告: を親コンポーネント内 (.vue ファイル内) に書くことを忘れないでください。

なのでuser.vueを次のようにしました。
user.vue

<template>
  <next-child/>
</template>

ですが、これではだめでuser.vueのページからの遷移だけがtransitionが動きませんでした。

次のようにdivで囲ったらうまくうごきました。
(コード表示が崩れるのは原因不明)
user.vue

<template>

<div>
    <next-child/>
  </div>

</template>