Vue RouterLink 怎么用 CSS 自定义样式？

很多用 Vue 开发单页应用的同学，在处理导航链接样式时，总会对 RouterLink 的 CSS 玩法犯难：它和普通 a 标签有啥区别？激活状态咋改样式？动态效果咋实现？今天就把 RouterLink 的 CSS 实用技巧拆成常见问题，一步步讲清楚，从基础到进阶都覆盖~

Vue RouterLink 是啥？和普通 a 标签有啥不一样？

先搞懂组件本质：RouterLink 是 Vue Router 提供的声明式导航组件，作用是在单页应用（SPA）里实现“不刷新页面”的跳转，它默认会渲染成 <a> 标签，但藏了很多路由专属能力：

• 路由控制：通过 to 属性指定跳转路径，代替 a 标签的 href；
• 激活状态自动管理：匹配到当前路由时，会自动添加 router-link-active（模糊匹配）、router-link-exact-active（精确匹配）这两个类名；
• 性能优化：SPA 下避免全页面刷新，只更新变化的组件区域。

而普通 <a href="xxx"> 是“硬跳转”，会触发浏览器全页面刷新，激活状态得自己写 JS 逻辑判断，效率和体验都不如 RouterLink。

基础款：怎么给 RouterLink 写静态 CSS 样式？

给 RouterLink 加样式，和普通 HTML 元素思路类似，但要注意渲染后的标签结构——因为 RouterLink 最终是 <a> 标签，所以可以用这 3 种方式：

直接给 RouterLink 加 class

在组件里这样写：

<router-link to="/home" class="nav-link">首页</router-link>

然后在 CSS 里选中 .nav-link 写样式：

.nav-link {
  color: #333;
  text-decoration: none; /* 去掉默认下划线 */
  padding: 8px 16px;
  border-radius: 4px;
}
.nav-link:hover {
  color: #007bff; /* hover 时变色 */
}

用属性选择器定位特定路由

如果想针对某个路径的 RouterLink 单独加样式，用 [to="路径"] 选择器：

router-link[to="/about"] {
  font-weight: 600;
}

不过要注意：RouterLink 是 Vue 组件，渲染后是 <a>，所以也可以写成 a[href="#/about"]（哈希路由场景），但更推荐用 class，避免路由模式（哈希/历史模式）切换时的兼容问题。

覆盖默认渲染的 a 标签样式

如果项目里所有 RouterLink 都要统一基础样式，直接写 a 标签的通用样式（但要注意别影响普通 <a>）：

/* 只作用于 RouterLink 渲染的 a 标签 */
.router-link-a { /* 假设给 RouterLink 加了 tag="a"（默认就是 a，可省略） */
  /* 通用样式 */
}

不过更安全的是给所有 RouterLink 加一个公共 class，<router-link class="base-link" ...>，再通过 .base-link 统一控制。

关键项：激活状态的 CSS 咋定制？

RouterLink 最实用的特性之一，就是自动管理激活类名，默认有两个类：

• router-link-active：模糊匹配（比如当前路由是 /article/1，/article 的 RouterLink 也会触发这个类）；
• router-link-exact-active：精确匹配（只有路由完全一致时才触发， 和 /home 严格区分）。

改默认激活类名（可选操作）

如果觉得默认类名太长,想自定义，在创建路由时配置：

const router = createRouter({
  history: createWebHistory(),
  routes: [...],
  linkActiveClass: 'my-active', // 替换 router-link-active
  linkExactActiveClass: 'my-exact-active' // 替换 router-link-exact-active
})

写激活状态的 CSS

以默认类名为例,直接针对这两个类写样式：

/* 模糊匹配激活时，文字变红 */
.router-link-active {
  color: red;
  border-bottom: 2px solid red;
}
/* 精确匹配激活时，文字加粗 */
.router-link-exact-active {
  font-weight: bold;
}

实战场景：避免嵌套路由“误激活”

比如导航有 （首页）和 /article（文章列表），当进入 /article/1 时，/article 的 RouterLink 会触发 router-link-active（因为包含 /article），但 的 RouterLink 也可能被“误激活”（如果没开 exact），这时候用 exact 属性 + 精确匹配类解决：

<router-link to="/" exact class="nav-link">首页</router-link>
<router-link to="/article" class="nav-link">文章</router-link>

CSS 里通过 router-link-exact-active 控制 的激活样式，router-link-active 控制 /article 的激活样式，就能避免层级路由的样式混乱。

进阶版：动态切换 RouterLink 的 CSS 样式

很多场景需要“根据状态变样式”，比如用户是否登录、路由参数变化等，这时候得用动态 class/内联样式。

动态 class（结合 Vue 的 class 绑定）

比如根据 isSpecial 变量，给 RouterLink 加特殊样式：

<template>
  <router-link 
    to="/" 
    :class="{ 'special-style': isSpecial }" 
    class="nav-link"
  >首页</router-link>
</template>
<script setup>
import { ref } from 'vue'
const isSpecial = ref(true) // 可以是接口返回、路由参数等动态值
</script>
<style>
.special-style {
  background: yellow;
  color: purple;
}
</style>

结合计算属性更灵活

如果样式逻辑复杂（比如根据当前路由名字判断），用计算属性返回 class：

<template>
  <router-link 
    to="/user" 
    :class="userLinkClass" 
    class="nav-link"
  >用户中心</router-link>
</template>
<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const userLinkClass = computed(() => {
  return {
    'user-active': route.name === 'User', // 路由名字匹配时加类
    'admin-style': route.params.role === 'admin' // 路由参数匹配时加类
  }
})
</script>
<style>
.user-active {
  border: 1px solid #42b983;
}
.admin-style {
  background: #f5f7fa;
}
</style>

内联样式（:style 绑定）

如果需要动态改样式属性（比如颜色、边距），直接用内联样式：

<router-link 
  to="/contact" 
  :style="{ 
    color: textColor, 
    padding: `${paddingSize}px` 
  }"
>联系我们</router-link>

const textColor = ref('#1abc9c')
const paddingSize = ref(10)

嵌套路由场景：RouterLink 的层级样式咋处理？

比如导航栏有下拉菜单,子路由链接需要缩进、区分层级，这时候用后代选择器+激活状态联动。

层级样式区分

给父级和子级 RouterLink 加不同 class，用后代选择器控制缩进：

<nav class="nav-dropdown">
  <router-link to="/product" class="parent-link">产品</router-link>
  <div class="child-nav">
    <router-link to="/product/list" class="child-link">产品列表</router-link>
    <router-link to="/product/detail" class="child-link">产品详情</router-link>
  </div>
</nav>

.nav-dropdown .parent-link {
  font-size: 16px;
  font-weight: 600;
}
.nav-dropdown .child-link {
  font-size: 14px;
  padding-left: 20px; /* 缩进体现层级 */
}

激活状态的层级联动

当子路由激活时,父路由的 RouterLink 也需要有“被激活”的视觉反馈（比如变深），利用 RouterLink 的 router-link-active 类，结合后代选择器：

/* 父级激活时，子级链接也变灰（模拟层级激活） */
.parent-link.router-link-active .child-link {
  color: #999;
}
/* 子级自身激活时，单独高亮 */
.child-link.router-link-active {
  color: #007bff;
  font-weight: 500;
}

移动端适配：RouterLink 的 CSS 要注意啥？

移动端屏幕小、交互靠触摸，样式得更“友好”：

加大点击区域

给 RouterLink 设置足够的 padding，避免用户误触：

.mobile-link {
  display: inline-block; /* 让 padding 生效 */
  padding: 12px 16px;
}

响应式样式（媒体查询）

不同屏幕宽度下调整字体、布局：

@media (max-width: 768px) {
  .nav-link {
    font-size: 14px;
    padding: 8px 12px;
  }
}
@media (max-width: 480px) {
  .nav-link {
    font-size: 12px;
    padding: 6px 8px;
  }
}

触摸反馈（:active 伪类）

移动端点击时加个“按下变暗”的反馈：

.router-link:active {
  opacity: 0.8;
  transform: scale(0.98); /* 轻微缩放，增强交互感 */
  transition: all 0.1s ease;
}

大型项目：RouterLink 样式咋和设计系统结合？

如果项目用了 CSS 预处理器（Sass/LESS）或 CSS 模块，能更高效管理样式：

CSS 预处理器（以 Sass 为例）

用混合宏（mixin）抽象通用链接样式，避免重复代码：

// _mixins.scss
@mixin router-link-base {
  color: #42b983;
  text-decoration: none;
  &:hover {
    color: #35495e;
  }
  &.router-link-active {
    color: #e74c3c;
    border-bottom: 2px solid #e74c3c;
  }
}
// 组件内使用
<style lang="scss" scoped>
.nav-link {
  @include router-link-base;
  /* 额外样式 */
  padding: 8px;
}
</style>

CSS 模块（CSS Modules）

通过局部作用域 class 避免样式污染，在 Vue 中这样用：

<template>
  <router-link :class="$style.navLink" to="/">首页</router-link>
</template>
<style module>
.navLink {
  color: #2c3e50;
  &:hover {
    color: #16a085;
  }
}
</style>

和 keep-alive 一起用，RouterLink 样式会崩吗？

不会！keep-alive 是组件缓存，作用是保留组件实例和状态；而 RouterLink 的激活状态由路由匹配决定，和组件是否缓存无关。

但要注意：如果组件缓存后，页面内有“临时交互样式”（比如用户点击后手动加的 class），需要用路由激活状态来同步——这时候还是得靠 RouterLink 的 router-link-active 等类名，CSS 逻辑不需要因为 keep-alive 改变，只要路由配置和激活类名是对的，样式就稳。

RouterLink 的 CSS 玩法核心是“抓准组件特性+结合 Vue 响应式”：基础样式靠 class/选择器，激活状态靠自动类名，动态样式靠绑定语法，复杂场景靠预处理器/模块，把这些逻辑理顺，不管是做导航栏、面包屑还是复杂菜单，样式都能精准控制~要是你还有更小众的场景（SSR 下的样式兼容），评论区聊聊？