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

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

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

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

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

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

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

 .router-link-active {
  background-color: #f0f0f0;
  color: #333;
}

.router-link-exact-active {
  font-weight: bold;
}

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

以上是Nuxt3中如何優雅地實現導航鏈接選中狀態？的詳細內容。更多資訊請關注PHP中文網其他相關文章！