Nuxt3中如何優雅地實現導航鏈接選中狀態？

Nuxt3優雅實現導航鏈接選中狀態

在Nuxt3開發中，為導航鏈接添加選中狀態以增強用戶體驗至關重要。本文將詳細講解如何在Nuxt3中實現這一效果，并解決圖片中所示問題。

圖片展示了一個需要高亮顯示的標簽。實現的關鍵在于利用Nuxt3路由系統提供的兩個預設類名：.router-link-active 和 .router-link-exact-active。

.router-link-active 類會在當前路由路徑包含組件目標路徑時自動添加。例如，指向/about，當前路由為/about/contact，則.router-link-active類將被添加到上。

.router-link-exact-active 類則更嚴格，僅當當前路由路徑與組件目標路徑完全匹配時才添加。沿用上述例子，只有當前路由為/about時，才會添加.router-link-exact-active類。

因此，只需為這兩個類名編寫css樣式即可實現選中狀態。例如：

.router-link-active {   background-color: #f0f0f0;   color: #333; }  .router-link-exact-active {   font-weight: bold; }

這段CSS代碼使選中鏈接背景變為淺灰，字體變為深灰；完全匹配時，字體加粗?？筛鶕O計需求調整樣式。 記得將CSS代碼添加到Nuxt3項目中，例如assets/css目錄下的樣式文件。 這樣即可輕松實現Nuxt3導航鏈接的選中狀態。