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

Question

前提・実現したいこと

・Vue-routerの<router-link>を使ってページ移動をさせています
・ナビゲーションバーに/blogsというリンクを<router-link>で張っています
・ページの下部に/blogs/fooというリンクを<router-link>で飛ぶようにしています

=> /blogs/fooのページを開いた際に、ナビゲーションバーの/blogsのリンクにrouter-link-activeのクラスをつけたいです。

https://router.vuejs.org/ja/api/
によれば、/blogsにactive-class="router-link-active"をつけると/blogs/fooを開いた際にrouter-link-activeのクラスが/blogsにもつくと書いてあると解釈しました。

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

エラーは出ていませんが、/blogs/fooを開いても/blogsのリンクにrouter-link-activeのクラスは全くつきません。

該当のソースコード

headerComponent.vue:
<template>
  <header>
    <nav class="nav justify-content-center">
      <li class="nav-item">
        <router-link to="/" class="LogoLink">
          <img alt="logo" src="@/assets/logo.png" class="navLogo mx-auto">
        </router-link></li>
      <li class="nav-item"><router-link to="/blogs" active-class="active">Blogs</router-link></li>
      <li class="nav-item"><router-link to="/contact" active-class="active">Contact</router-link></li>
    </nav>
  </header>
</template>

footerComponent.vue:
<li><router-link to="/blogs/foo">foo page</router-link></li>

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

App.vue:
<template>
  <HeaderComponent />
  <router-view />
  <FooterComponent />
</template>

<script>
import HeaderComponent from '@/components/HeaderComponent.vue'
import FooterComponent from '@/components/FooterComponent.vue'

試したこと

https://router.vuejs.org/ja/api/#router-link-props

の書き方を試しましたが追加されませんでした。

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

npm 6.14.10
Vue-cli 4.5.11
vue-router@3.5.1

Comments

[plasticgrammer]

> /blogsにactive-class="router-link-active"をつけると/blogs/fooを開いた際にrouter-link-activeのクラスが/blogsにもつくと書いてあると解釈しました。

自分も詳しくわかっていないので確認させて頂きたいのですが、
サイト内の具体的にどの記述からそう解釈したのでしょうか。

[g-n-n]

https://router.vuejs.org/ja/api/#exact
exact
型: boolean
デフォルト: false
デフォルトのアクティブクラスのマッチングの振る舞いは 包含的なマッチ です。 例えば、現在のパスが /a/ または /a から始まる限りは、<router-link to="/a"> にアクティブクラスが適用されます。

この項目です。
https://qiita.com/TK-C/items/f57f845fc2d51d7385e0
なども同様の解釈をしていると思いましたが自信はありません。

[plasticgrammer]

回答ありがとうございます。確かに書いてありますね。

追加で確認ですが、リンクを保持しているheaderComponent.vueは、foo.vueから読み込んでいるのでしょうか。
それとも共通のルートコンポーネントがあって、そこで読み込んでいるのでしょうか。

[g-n-n]

headerComponent.vueはApp.vueから読み込んでます。
foo.vueのリンクが書いてあるのはfooterComponent.vueで、これもApp.vueから読み込んでます。

[plasticgrammer]

何度もすみません。
foo.vueに同様のrouter-linkを置くと、スタイルは適用されるのか確認することはできますでしょうか。
それで適用されるなら、再描画しないとダメなのかもしれません。

[g-n-n]

foo.vueにfoo.vueへのrooter-linkをおいてもクラスはつきませんでした。
foo.vueに/blogsへのrouter-linkをおくと正常に遷移します。クラスはrouter-link-activeとrouter-link-exact-activeがつきました（これはルートページ→/blogs, /contactでも同様でした）

[plasticgrammer]

回答ありがとうございます。
条件だけを見るとクラスが付与されないのはおかしい気がしますが、原因がわからないです。お役に立てずすみません。

追記）Vue2でのデモ（https://jsfiddle.net/8xrk1n9f/）を動かしましたが、予想している仕様で正しいようです。

Answer 1

【原因】 記述ミス
【詳細】 /blogsのところにchildren:[...]として記述する必要があったため、個別に書いていたコードではクラスが追加されなかった。

間違った記述
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' }
  }
...
]

正しい記述
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' }
      }
    ]
  },
...
]

Blog.vue:

<template>
  <router-view></router-view>
</template>

BlogIndex.vueがこれまでのBlog.vueになる

【参考文献】
https://jsfiddle.net/8xrk1n9f/
https://www.ritolab.com/entry/181#aj_2

【謝辞】
plasticgrammerさんありがとうございました。