nuxt.jsでネストされたルートのtransitionでつまづいたこと
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>
ディスカッション
コメント一覧
まだ、コメントがありません