🛣️

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

2023/04/26に公開

Vue Router

Nuxt 3

tech

やりたかったこと

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

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

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

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

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

結論

このstackoverflowの記事が役に立ちました。

ドキュメントのNested Routesにある様に、親階層のvueファイルが必要になります。

いままで

-| 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