router-link 默认添加 router-link-active 和 router-link-exact-active 类实现导航高亮，前者匹配当前路由及子路由，后者仅完全匹配路径；支持自定义 class 名和 aria-current 属性提升可访问性与样式隔离。

router-link 默认会根据当前路由自动添加 router-link-active 和 router-link-exact-active 两个 class，这是实现导航高亮最直接、最轻量的方式——无需手写逻辑，也不用监听路由变化。

利用内置 class 直接写 CSS

Vue Router 已经帮你完成了状态判断，你只需在样式中针对性定义：

• .router-link-active：匹配到当前路由（含子路由）时生效，适合“首页”“产品”这类有子页面的菜单项
• .router-link-exact-active：仅当路径完全相同时生效，适合“关于我们”“联系我们”这类独立页面

例如：

.nav-item.router-link-exact-active { color: #42b883; font-weight: bold; }

自定义激活 class 名（更语义化）

如果不想依赖默认类名，可在 <router-link></router-link> 上用 active-class 和 exact-active-class 属性指定：

用户中心

这样就能用 .menu-exact-on 精准控制高亮，避免和其它组件样式冲突。

闪光简历

闪光简历是一款用于 AI 生成、排版、测评和优化简历的在线求职工具。

下载

配合 aria-current 提升可访问性

router-link 在激活时会自动添加 aria-current="page" 属性。你可以用属性选择器增强样式或辅助技术支持：

.nav-item[aria-current="page"] { background: #f0f9ff; }

这对屏幕阅读器用户很友好，也方便后续用 JS 做扩展逻辑。

嵌套路由下的高亮逻辑要分清

比如路径是 /admin/users/edit/123，那么以下链接都会触发 router-link-active：

• to="/admin"
• to="/admin/users"
• to="/admin/users/edit"

若只想让一级菜单“管理员”在访问任意 admin 子页时高亮，用 active-class 即可；若希望“用户管理”只在 /admin/users 及其子路径下高亮，确保它的 to 值准确，并配合 exact 属性按需使用。