1.exact match到底解决啥痛点？

举个实际例子：导航栏有“首页”（to="/"）和“关于我们”（to="/about"），默认情况下，当你点进“关于我们”页面（路径是/about），“首页”的导航也会高亮——因为/about的路径是以开头的，符合模糊匹配规则，这显然不符合用户预期：用户明明在“关于我们”，首页却亮了，体验很糟。

而exact match的作用，就是把这种“包含即匹配”改成“完全相等才匹配”，给<router-link>加上exact属性后，只有当当前路径和to的值完全一模一样时，才会添加active类，还是上面的例子，给“首页”的<router-link>加exact，访问/about时，“首页”就不会错误高亮了。

怎么给路由导航加exact？

核心就一个：给<router-link>标签加exact属性（不用写值，像布尔属性一样用）。

看代码示例：

<template>
  <nav>
    <!-- 加exact，只有路径是/时才高亮 -->
    <router-link to="/" exact>首页</router-link>
    <router-link to="/about">关于我们</router-link>
    <router-link to="/user" exact>/user页面</router-link>
  </nav>
</template>

这里要注意两个点：

• exact是<router-link>的专属属性，和路由配置里的path没关系，路由配置里的path是控制“哪个路径渲染哪个组件”，而exact是控制“导航什么时候高亮”。
• 不是所有导航都需要exact！关于我们”（to="/about"）这种没有子路径的导航，默认模糊匹配也不会出错（因为其他路径不会以/about为前缀，除非你有/about/xxx的子路由），所以一般只有根路径（）和有子路径的父级导航（比如/user是父路径，/user/1是子路径）需要加exact。

哪些场景必须用exact？

场景1：根路径导航（to="/"）
只要项目里有其他子路径（比如/about、/product），根路径的<router-link>必须加exact，否则访问任何子路径时，根路径导航都会高亮，用户根本分不清当前在哪个页面。

场景2：存在父子路径的导航
比如有/user（列表页）和/user/1（详情页）两个路径，给/user的<router-link>加exact后，访问/user/1时，/user的导航就不会错误高亮——用户能清晰看到自己在详情页，而不是列表页。

场景3：多Tab导航且路径结构相似
比如后台管理系统里，有/dashboard/order和/dashboard/product两个路径，它们的父路径都是/dashboard，如果给/dashboard的<router-link>加exact，就能避免访问子路径时父导航错误高亮。

不用exact容易踩哪些坑？

坑1：导航高亮混乱，用户体验差
最直观的就是“该亮的不亮，不该亮的乱亮”，比如用户明明在“订单页面”，结果“首页”和“订单页面”的导航同时高亮，用户根本不知道自己到底在哪。

坑2：逻辑误解：以为路由配置能控制高亮
有人会想：“我把路由配置的path写精确点，是不是就不用exact了？” 大错特错！路由配置的path控制的是“哪个组件渲染”，而<router-link>的active类是Vue Router自动根据路径匹配添加的（默认模糊匹配），哪怕你路由配置的path是精确的，只要<router-link>没加exact，高亮逻辑还是模糊匹配。

举个反例：
路由配置写了{ path: '/user', component: User }，但<router-link to="/user">没加exact，此时访问/user/1（假设你没给/user/1配路由，Vue Router会走404，但路径还是/user/1），/user的导航依然会高亮——因为路径包含/user，触发了模糊匹配。

exact和路由配置的path匹配有啥区别？

很多人会把这俩搞混，这里直接对比：

举个场景对比：

• 路由配置path: '/user' → 当访问/user、/user/1、/user/edit时，User组件都会渲染（因为前缀匹配）。
• <router-link to="/user" exact> → 只有访问路径完全是/user时，这个导航才会高亮；访问/user/1时，导航不会高亮。

进阶：exact的原理和源码小窥（懂原理更稳）

Vue Router内部给<router-link>的active类做匹配时，默认用的是路径的包含关系（即当前路径是否以to的路径为前缀），当加上exact属性后，匹配逻辑变成严格相等（currentPath === toPath）。

从源码角度看（简化理解）：

// 伪代码，理解逻辑
function isActive(route, path, exact) {
  if (exact) {
    return route.path === path; // 完全相等
  } else {
    return route.path.startsWith(path); // 前缀匹配（包含）
  }
}

所以exact本质是改变了<router-link>判断“是否激活”的逻辑，从“包含”变成“全等”。

最后总结一下：exact match是Vue Router里控制导航高亮精确性的关键属性，核心解决“模糊匹配导致导航错误高亮”的问题，记住这三点：

• 根路径和有子路径的父导航必加exact；
• exact是<router-link>的属性，和路由配置的path各司其职；
• 不用exact会导致导航高亮混乱，影响用户体验。

现在回到你的项目里，检查下导航栏的<router-link>，是不是该加exact的地方漏加了？改完后再看导航高亮,是不是清爽多了～