How to elegantly implement navigation link selection status in Nuxt3?

Nuxt3 elegantly implements navigation link selection status

In Nuxt3 development, it is crucial to add a checked state to the navigation link to enhance the user experience. This article will explain in detail how to achieve this effect in Nuxt3 and solve the problems shown in the picture.

The image shows a highlighted<a></a> Label. The key to implementation is to utilize two preset class names provided by the Nuxt3 routing system: .router-link-active and .router-link-exact-active .

.router-link-active class will contain the current route path.<nuxt-link></nuxt-link> Automatically add the component target path. For example,<nuxt-link></nuxt-link> Point to /about , the current route is /about/contact , then .router-link-active class will be added to<nuxt-link></nuxt-link> superior.

.router-link-exact-active class is more stringent, only if the current route path is<nuxt-link></nuxt-link> Added only when the component target path is exactly matched. Following the above example, .router-link-exact-active class will be added only when the current route is /about .

Therefore, you can achieve the selected state by simply writing a CSS style for these two class names. For example:

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

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

This CSS code changes the selected link background to light gray and the font becomes dark gray; when exactly matched, the font is bold. The style can be adjusted according to the design needs. Remember to add CSS code to Nuxt3 projects, such as style files in the assets/css directory. This allows you to easily achieve the selected status of Nuxt3 navigation links.

The above is the detailed content of How to elegantly implement navigation link selection status in Nuxt3?. For more information, please follow other related articles on the PHP Chinese website!