Vue - router : How to remove underline from router - link

In Vue.js projects using Vue Router, by default, the links generated by the router-link component may display underlines because browsers typically apply underline styles to <a> tags. To remove these underlines from router-link, you can use CSS.

Method 1: Modify in Global Styles

You can add rules in the global CSS file to remove underlines from all <a> tags generated by router-link:

css
a {
  text-decoration: none; /* Remove underlines */
}

This approach affects all <a> tags in the project, so if you want to target only router-link, use more specific selectors.

Method 2: Use Specific Selectors

If you want to modify only the styles for router-link, you can add a specific class or use existing classes to define the styles:

css
.router-link-exact-active, .router-link-active {
  text-decoration: none; /* Remove underlines */
}

Here, .router-link-exact-active and .router-link-active are classes added by Vue Router for active route links, and you can use them to remove underlines from active links.

Method 3: Use Inline Styles in Components

If you prefer not to modify styles in CSS files, you can directly apply inline styles to the router-link component:

vue
<router-link to="/example" style="text-decoration: none">Example</router-link>

This directly applies styles to the link to remove underlines.

Example

The following is a simple Vue component example demonstrating how to remove underlines from router-link using CSS classes:

vue
<template>
  <div>
    <router-link to="/" class="custom-link">Home</router-link>
    <router-link to="/about" class="custom-link">About</router-link>
  </div>
</template>

<style>
.custom-link {
  text-decoration: none;
}
</style>

In this example, the .custom-link class is applied to all router-link components, thereby removing the underlines. This approach keeps your code clear and organized while avoiding the effects of global styles.

These methods can be chosen and adjusted based on the specific needs of your project and the existing style architecture.