router-link去除下划线,字体颜色为黑色
时间: 2023-10-20 08:02:44 浏览: 212
vue router-link 默认a标签去除下划线的实现
要去除`router-link`的下划线并将字体颜色设置为黑色,你可以使用以下方法:
1. 使用内联样式:在`router-link`标签上添加`style`属性,设置`text-decoration`为`none`来去除下划线,设置`color`为`black`来将字体颜色设置为黑色。例如:
```html
<router-link to="/" style="text-decoration: none; color: black;">Home</router-link>
```
2. 使用全局CSS样式:在全局的CSS文件(如`App.vue`或`main.css`)中添加样式规则来修改`router-link`的样式。例如:
```css
/* App.vue 或 main.css */
.router-link-active,
.router-link-exact-active {
text-decoration: none;
color: black;
}
```
3. 使用局部CSS样式:在组件的`<style>`标签中添加样式规则来修改`router-link`的样式。例如:
```html
<template>
<router-link to="/" class="custom-link">Home</router-link>
</template>
<style>
.custom-link {
text-decoration: none;
color: black;
}
</style>
```
这些方法可以根据你的需求选择适合的方式来去除下划线并修改字体颜色。记得根据具体情况选择合适的选择器和属性来修改样式。
阅读全文