[Vue3] でrouter-link-activeクラスがつかない

Question

### 前提・実現したいこと・Vue-routerのを使ってページ移動をさせています・ナビゲーションバーに```/blogs```というリンクを``````で張っています・ページの下部に```/blogs/foo```というリンクを``````で飛ぶようにしています => ```/blogs/foo```のページを開いた際に、ナビゲーションバーの```/blogs```のリンクに```router-link-active```のクラスをつけたいです。 [https://router.vuejs.org/ja/api/](https://router.vuejs.org/ja/api/) によれば、```/blogs```に```active-class="router-link-active"```をつけると```/blogs/foo```を開いた際に```router-link-active```のクラスが```/blogs```にもつくと書いてあると解釈しました。 ### 発生している問題・エラーメッセージエラーは出ていませんが、```/blogs/foo```を開いても```/blogs```のリンクに```router-link-active```のクラスは全くつきません。 ### 該当のソースコード ```vue headerComponent.vue: ``` ```vue footerComponent.vue:

foo page

``` ```js router/index.js: { path: '/blogs', name: 'Blogs', component: () => import(/* webpackChunkName: "Blogs" */ '../views/Blogs.vue'), meta: { title: 'おしらせ' } }, { path: '/blogs/foo', name: 'foo', component: () => import(/* webpackChunkName: "Foo" */ '../views/foo.vue'), meta: { title: 'foo' } } ``` ```vue App.vue:

Accepted Answer

【原因】記述ミス【詳細】 ```/blogs```のところに```children:[...]```として記述する必要があったため、個別に書いていたコードではクラスが追加されなかった。 ```vue 間違った記述 route/index.js: const routes = [ { path: '/blogs', name: 'Blogs', component: () => import(/* webpackChunkName: "Blogs" */ '../views/Blogs.vue'), meta: { title: 'おしらせ' } }, { path: '/blogs/foo', name: 'foo', component: () => import(/* webpackChunkName: "Foo" */ '../views/foo.vue'), meta: { title: 'foo' } } ... ] ``` ```vue 正しい記述 route/index.js: const routes = [ { path: '/blogs', name: 'Blogs', component: () => import(/* webpackChunkName: "Blogs" */ '../views/Blogs.vue'), meta: { title: 'おしらせ' }, children: [ { path: '', name: 'Blog Root', component: () => import(/* webpackChunkName: "BlogRoot" */ '../views/BlogIndex.vue'), meta: { title: 'おしらせトップ' } }, { path: ':foo', name: 'foo', component: () => import(/* webpackChunkName: "foo" */ '../views/foo.vue'), meta: { title: 'foo' } } ] }, ... ] ``` ```vue Blog.vue: ``` BlogIndex.vueがこれまでのBlog.vueになる【参考文献】 [https://jsfiddle.net/8xrk1n9f/](https://jsfiddle.net/8xrk1n9f/) [https://www.ritolab.com/entry/181#aj_2](https://www.ritolab.com/entry/181#aj_2) 【謝辞】 plasticgrammerさんありがとうございました。

[Vue3] <router-link>でrouter-link-activeクラスがつかない

前提・実現したいこと

発生している問題・エラーメッセージ

該当のソースコード

試したこと

補足情報（FW/ツールのバージョンなど）

関連した質問