vue3 RouterLink链接颜色修改的方法

南雨北斗2026-08-07 13:46

方案 1：正确穿透写法（最简推荐）

:deep() 里面直接写子元素，外层 .nav 自带 scoped 标识，不用放进 deep 里

css 复制代码

/* 正确：外层.nav自带data-v，deep只写内部a */
.nav :deep(a) {
  color: #333;
  text-decoration: none;
}
.nav :deep(a:hover) {
  color: #6381a0;
}
.nav :deep(a.router-link-active) {
  color: #2baa95;
  font-weight: bold;
}
.nav :deep(a.router-link-exact-active) {
  color: #3fa531;
}

方案 2：给 RouterLink 单独加自定义 class，精准选择

html 复制代码

<RouterLink to="/" class="nav-link">
  <div class="item">xxx</div>
</RouterLink>

css 复制代码

.nav :deep(.nav-link) {
  color: #333;
  text-decoration: none;
}
.nav :deep(.nav-link:hover) {
  color: #6381a0;
}
.nav :deep(.nav-link.router-link-active) {
  color: #2baa95;
}

方案 3：使用插槽完全脱离 a 标签控制（无穿透烦恼）

hmtl 复制代码

<RouterLink to="/" v-slot="{ navigate, isActive }">
  <div class="item" :class="{ active: isActive }" @click="navigate">
    <img src="@/assets/images/home.png"/>
    <span>首页</span>
  </div>
</RouterLink>

样式直接写，不需要 :deep

css 复制代码

.item {
  display: flex;
  align-items: center;
  color: #333;
  cursor: pointer;
  text-decoration: none;
}
.item:hover {
  color: #6381a0;
}
.item.active {
  color: #3fa531;
  font-weight: bold;
}