Vue.js中如何为侧边栏的激活状态router-link添加样式

你已经在路由中配置了linkExactActiveClass: 'active'，Vue Router会自动为路径完全匹配的router-link元素添加active类，你直接针对该类编写CSS样式即可，常见实现方案如下：

方案1：直接编写全局样式 #

给激活状态的导航链接、内部图标、文字自定义样式：

/* 激活状态的导航链接基础样式 */
.nav-link.active {
  background: #eff6ff; /* 自定义激活背景色 */
  color: #2563eb; /* 自定义激活文字色 */
  border-left: 3px solid #2563eb; /* 左侧激活标识条 */
  padding-left: 13px; /* 抵消边框带来的缩进变化，按需调整 */
}

/* 调整激活状态下的图标样式 */
.nav-link.active i {
  color: #2563eb !important; /* 如需覆盖图标原有颜色类可加!important */
}

/* 调整激活状态下的文字样式 */
.nav-link.active .nav-link-text {
  font-weight: 600;
}

方案2：Scoped样式下的写法 #

如果样式写在带scoped属性的单文件组件中，需要使用深度选择器穿透子组件样式：

/* Vue2 写法 */
/deep/ .nav-link.active {
  /* 同上样式内容 */
}

/* Vue3 写法 */
:deep(.nav-link.active) {
  /* 同上样式内容 */
}

补充说明 #

• 如果你需要子路由激活时父级侧边栏也高亮，可以将路由配置中的linkExactActiveClass替换为linkActiveClass，该配置为路径模糊匹配，只要当前路径包含对应router-link的path值就会添加激活类
• 如果你需要给外层li标签也加激活样式，可以在sidebar-item组件中给li绑定动态类：

  <li class="nav-item bg-white" :class="{ 'active-item': $route.fullPath === link.path }">
  <!-- 其余代码保持不变 -->
  

  再对应编写.active-item的样式即可。

内容的提问来源于stack exchange，提问作者Sarath Sps