🛣️

Nuxt 3 でnested routesにactive-classが適用されないのを解決しました

2023/04/26に公開

やりたかったこと

サイドメニューがあって、選んだメニューに遷移した時に、選択部分の色を変えるということがやりたかったです。
Vue Routerの機能でactive-classを指定すると簡単に実現できるのですが、そこから1つ下の階層ページに遷移するとなぜかactive-classが外れてしまいました。

/tasksページでは色が変わるけれど、/tasks/1ページでは変わらないという状態です。

また、パスパラメータの値(上の例では1)を取得することもできませんでした。

const route = useRoute()
const { id } = route.params

直接/tasks/1のURLを表示すると、取得できるのですが、/tasksからnavigateToで遷移すると取得できませんでした。

結論

このstackoverflowの記事が役に立ちました。
https://stackoverflow.com/questions/74637529/router-link-active-nuxt-3-vuejs-on-nested-routes-not-applying-to-parent/74748684#74748684

ドキュメントのNested Routesにある様に、親階層のvueファイルが必要になります。
https://nuxt.com/docs/guide/directory-structure/pages#nested-routes

いままで

-| pages/
---| tasks/
------| [id].vue
------| index.vue

としていたのですが、

正しくはこうでした。

-| pages/
---| tasks/
------| [id].vue
------| index.vue
---| tasks.vue <--- これが必要!

tasks.vueは何をしているかというと、

<template>
  <NuxtPage />
</template>

こんな感じで、単純にNuxtPageをラップしているだけです。

あくまで表示しているのはpages/tasks.vueで、その中にpages/tasks/[id].vueを埋め込んで表示しているということみたいです。
そう考えると理解できなくもないのですが、pages/tasks.vueがない状態で、pages/tasks/[id].vueだけでも表示できてしまうので混乱しました。

この対応をすることで、active-classの表示と、パスパラメータのID取得ができる様になりました。

よくわからずハマってしまったので誰かの助けになれば幸いです。

Discussion

ログインするとコメントできます