過去バージョン

この記事の要点

Vue Router 利用時は が自動付与する router-link-active / router-link-exact-active CSS クラスを利用 カスタムクラス名は createRouter の linkActiveClass / linkExactActiveClass オプション 個別 に active-class="..." を渡せばその要素だけ別クラス computed + $route.path で :class バインドする手法も汎用的 Nuxt 3 は が同じ動作。router-link-active がそのまま使える

Vue Router のデフォルト挙動

Vue Router を使ったプロジェクトでは が現在ルートにマッチした要素に自動でクラスを付与します:

• router-link-active — そのリンク先 (またはサブパス) にいる場合
• router-link-exact-active — そのリンク先と完全一致している場合

最小構成

これだけで /about にいるときに "About" だけがハイライトされます。

active と exact-active の違い

現在 URL	リンク to="/"	リンク to="/products"
/	active + exact-active	-
/products	active	active + exact-active
/products/123	active	active のみ (exact 不一致)

つまり router-link-active は前方一致、router-link-exact-active は完全一致です。

クラス名のグローバル変更

// router/index.js (Vue Router 4)
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [/* ... */],
  linkActiveClass: 'is-active',
  linkExactActiveClass: 'is-current',
});

export default router;

/* CSS 側もこれで参照 */
nav a.is-active { color: #f4c430; }
nav a.is-current { background: #fffbea; }

リンク単位のカスタマイズ

  About

computed + $route で完全制御

サブメニュー / ボタン / フッターなど 以外の要素でハイライトしたい場合:

ネストルートでの挙動

子ルートにいるとき親リンクも active になります:

// routes
{
  path: '/products',
  component: ProductsLayout,
  children: [
    { path: '', component: ProductsIndex },
    { path: ':id', component: ProductDetail },
  ],
}

// /products/123 にいるとき
//  は router-link-active が付く (前方一致)
//  は exact-active も付く

動的なルートに対する判定

Nuxt 3 の場合

Nuxt 3 は が同等の動作をします。クラス名も同じ router-link-active / router-link-exact-active:

Nuxt 3.4+ では activeClass / exactActiveClass プロップで変更可能:

About

クエリパラメータ違いを区別したい

標準の active 判定はパスのみ。クエリも含めたい場合は手動:

CSS で表現の工夫

/* 下線で示す */
nav a.router-link-active {
  position: relative;
}
nav a.router-link-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: #f4c430;
}

/* バッジで示す */
nav a.router-link-exact-active::before {
  content: '●';
  color: #f4c430;
  margin-right: 4px;
}

/* スムーズなトランジション */
nav a {
  transition: color .2s, border-color .2s;
}

FAQ

Q: / リンクが全ページで active になる
A: 旧 Vue Router 3 の挙動。exact プロップを付けるか、Vue Router 4 にアップグレード (4 では exact-active が独立クラス化)。

Q: ハイライトが付かない
A: が描画する 要素にクラスが付く。CSS で nav a.router-link-active のようにセレクタを正しく指定。

Q: SSR / Hydration で初期表示時にハイライトが消える
A: Nuxt 3 / Vue Router 4 のサーバ側も useRoute() を解決するので問題なし。ハイライトが消える場合は CSS のスコープ問題を疑う。

Q: アンカーリンク (#section) もハイライトしたい
A: ハッシュは route.hash で取れる。:class="{ active: route.hash === "#section" }" で判定。