router-link的active-class作用

考察点分析 link

本题主要考察候选人对Vue Router导航机制的掌握程度，重点评估以下能力维度：

1. 框架机制理解：准确理解Vue Router内置组件的行为特征
2. 路由匹配规则：区分模糊匹配与精确匹配的应用场景
3. 样式控制能力：掌握动态类名绑定与CSS样式的协同工作方式

具体技术评估点：

• active-class与exact-active-class的触发条件差异
• 路由嵌套场景下的类名匹配逻辑
• 导航高亮的工程化实现方案

技术解析 link

关键知识点 link

路由匹配模式 > 类名绑定机制 > CSS样式控制

原理剖析 link

1. active-class
   默认类名router-link-active，当满足下列条件时应用：

   • 当前路由路径包含目标路由路径（非精确匹配）
   • 适用于多级路由场景（如：/user激活时，/user/profile的子路由链接也会应用）

2. exact-active-class
   默认类名router-link-exact-active，仅在路径完全匹配时触发。通过路由配置的linkExactActiveClass可全局修改，常用于：

   • 精确匹配根路径（exact属性简写）
   • 避免嵌套路由的父级链接错误高亮

3. 匹配优先级
   路由系统通过path-to-regexp库进行路径解析，匹配顺序遵循嵌套路由深度优先原则

常见误区 link

• 误认为添加active-class即可实现高亮，但未配置对应CSS样式
• 混淆exact-active-class与active-class的作用范围
• 未处理动态路由参数场景的匹配规则（如：/user/:id）

问题解答 link

router-link的active-class用于标记当前包含匹配的路由链接，而exact-active-class仅在精确匹配时生效。典型实现方案包含三个步骤：

1. 配置路由链接

  // 路由配置示例
const router = new VueRouter({
  linkActiveClass: 'nav-active',    // 全局修改active类名
  linkExactActiveClass: 'exact-active' // 全局修改精确匹配类名
})
  

2. 模板声明

  <router-link 
  to="/dashboard"
  active-class="active-link"
  exact-active-class="exact-active-link"
>
  Dashboard
</router-link>
  

3. 样式控制

  .active-link {
  color: #42b983;
  /* 包含匹配时的样式 */
}

.exact-active-link {
  border-bottom: 2px solid #35495e;
  /* 精确匹配时的强调样式 */
}
  

解决方案 link

动态路由处理 link

  <template>
  <!-- 处理动态路由参数 -->
  <router-link 
    :to="{ name: 'user', params: { id: 123 } }"
    :class="{ 'disabled-link': $route.params.id === '123' }"
  >
    User Profile
  </router-link>
</template>
  

性能优化 link

1. CSS优化：使用will-change: transform提升重绘性能
2. 条件渲染：对大型导航列表使用v-show替代v-if保持DOM复用
3. 节流处理：对路由监听逻辑添加防抖机制

深度追问 link

1. 如何实现编程式导航的高亮控制？
   通过$route对象匹配当前路径，结合计算属性返回动态类名

2. 多级路由场景如何避免父级链接持续高亮？
   在父级路由链接添加exact属性强制精确匹配

3. 如何测试路由高亮逻辑的正确性？
   使用Vue Test Utils的router-link-stub模拟路由状态进行单元测试