router-link去除默认蓝字下划线并设置颜色高亮

1,118 阅读1分钟

直接设置style即可,如果没有成功的话,可以看一下router-link外层嵌套的class名是什么

.router-link-active {
    text-decoration: none;//去除默认样式
    color: orange;//高亮的颜色
  }
  a{
    text-decoration: none;
    color: grey;
  }

我自己的

<template>
    <div class="aside-nav">
        <div class="content-title common-style">归纳管理系统</div>
        <div class="content-list common-style" v-for="item in asideData" :key="item.link">
            <router-link :to="item.link"> {{item.name}}</router-link>
        </div>
    </div>
</template>
<style>
.router-link-active {
        text-decoration: none;
        color: #a7b1c2;
    }

    .content-list a {
        text-decoration: none;
        color: #a7b1c2;
    }
</style>