◀ 17.

Vue.js でナビゲーションの現在ページをハイライトする方法

▶
編集
この記事の要点
  • 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-
/productsactiveactive + exact-active
/products/123activeactive のみ (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" }" で判定。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. インストール(ファイルのダウンロード)
  2. npmを使用したプロジェクトの作成(mac)
  3. for 繰り返し処理
  4. ifの条件分岐とtemplateを用いたグループ化
  5. on:click クリック時のイベント処理
  6. modelとdata フォーム入力値とDOMへの即時反映
  7. computed(算出プロパティ)と使い方とdataとの違い
  8. ライフサイクルフック(created / mounted / updated / destroyedの使い方)
  9. $nextTickの使い方(ライフサイクルフック)
  10. メソッドの定義方法
  11. エラー一覧
  12. ルーティング設定
  13. aリンクの貼り方と動的URLの作成
  14. Mixinを利用した共通処理の記述方法
  15. v-bindによるデータ連携
  16. ヘッダー/フッターの共通コンポーネント
  17. ナビゲーションの現在ページをハイライトする方法
  18. 画面サイズの取得方法
2026-05-18 01:50:54 guest 379

人気ページ

最近更新/作成されたページ