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

在 Vue.js 项目中使用 Vue Router 时，默认情况下，router-link 组件生成的链接可能会带有下划线，这是因为浏览器通常会给 <a> 标签添加下划线样式。如果要从 router-link 中删除这些下划线，可以通过 CSS 来实现。

方法 1: 直接在全局样式中修改

你可以在全局的 CSS 文件中添加规则来移除所有 router-link 生成的 <a> 标签的下划线：

css
a {
  text-decoration: none; /* 移除下划线 */
}

这种方法会影响到项目中所有的 <a> 标签，所以如果你只想针对 router-link 修改样式，可以使用更具体的选择器。

方法 2: 使用具体选择器

如果你想只修改 router-link 的样式，可以添加一个特定的类或使用已有的类来指定样式：

css
.router-link-exact-active, .router-link-active {
  text-decoration: none; /* 移除下划线 */
}

这里 .router-link-exact-active 和 .router-link-active 是 Vue Router 自动为激活状态的路由链接添加的类，你可以用它们来移除激活状态链接的下划线。

方法 3: 在组件内部使用内联样式

如果你不想在 CSS 文件中修改样式，也可以直接在 router-link 组件上使用内联样式：

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

这样可以直接在链接上应用样式，移除下划线。

示例

以下是一个简单的 Vue 组件示例，演示如何通过 CSS 类方法移除 router-link 的下划线：

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>

在这个例子中，.custom-link 类应用于所有的 router-link，从而移除了下划线。通过这种方式，你可以保持代码的清晰和组织性，同时避免了全局样式的影响。

这些方法可以根据项目的具体需求和已有的样式架构进行选择和调整。