这其实是预期行为，并不是Bug哦。

原因解释 #

Vue Router中的router-link-exact-active类是基于严格匹配路由完整路径来添加的——这里的完整路径包括路径部分、查询参数（?后面的内容）甚至哈希值（#后面的内容）。当你执行this.$router.push('/?foo=bar')时，当前路由的完整路径是/?foo=bar，而你的<router-link :to="'/'">指向的是不带查询参数的/，两者并不完全一致，所以不会触发router-link-exact-active类的添加。

解决方法 #

根据你使用的Vue Router版本，有几种不同的处理方式：

• Vue Router 4.x及以上版本：可以直接使用exact-path属性，这个属性会让router-link只匹配路由的路径部分，忽略查询参数和哈希值。修改后的router-link代码如下：

  <router-link :to="'/''" exact-path>首页</router-link>
  

  这样不管路径后带什么查询参数，只要路径是/，这个链接就会被标记为活跃状态。

• Vue Router 3.x及以下版本：没有exact-path属性，我们可以手动计算激活状态：

  1. 直接在模板中判断路由路径：

     <router-link 
       :to="'/''"
       :class="{ 'router-link-exact-active': $route.path === '/' }"
     >
       首页
     </router-link>
     

  2. 或者用计算属性封装逻辑（更适合复杂场景）：

     // 在组件的computed中定义
     computed: {
       isHomeActive() {
         return this.$route.path === '/'
       }
     }
     

     然后在模板中使用：

     <router-link 
       :to="'/''"
       :class="{ 'router-link-exact-active': isHomeActive }"
     >
       首页
     </router-link>
     

• 自定义活跃类名：如果你不想复用router-link-exact-active，也可以自定义一个类名，比如custom-active，然后用上面的判断逻辑给链接添加这个类，再写对应的样式即可。

内容的提问来源于stack exchange，提问作者Alex Lomia