vue-router：push相同query路由时$route监听重复触发该如何解决？

解决方案 #

1. 点击按钮前先做参数校验，避免无意义的路由跳转

每次调用$router.push前先对比当前路由的query参数和待传入的参数是否完全一致，一致的话直接终止逻辑，不触发路由跳转：

onClickBtn(){
  const targetQuery = {name:'kevin' , age:21}
  const currentQuery = this.$route.query
  // 对比参数是否完全相同
  if(targetQuery.name === currentQuery.name && Number(targetQuery.age) === Number(currentQuery.age)){
    return
  }
  this.$router.push({query: targetQuery })
}

注意：你原代码里写的queries是错误用法，Vue Router 传递查询参数的字段名是query，写错会导致参数无法正确挂载到路由上，也可能加重重复触发的问题

2. 优化路由监听逻辑，仅在参数变化时调用API

监听$route时可以拿到新旧两个路由对象，对比两个对象的query参数，只有参数发生变更时才执行API调用逻辑：

watch:{
  $route: function(newRoute, oldRoute){
    const newQuery = newRoute.query
    const oldQuery = oldRoute.query
    // 仅当关注的query参数变化时才调用API
    if(newQuery.name !== oldQuery.name || Number(newQuery.age) !== Number(oldQuery.age)){
      // call API
    }
  }
}

如果你只需要关注这两个参数的变化，也可以直接监听对应query字段，写法更简洁：

watch: {
  '$route.query.name': function() {
    // call API
  },
  '$route.query.age': function() {
    // call API
  }
}

3. 可选：给路由跳转加catch捕获重复跳转报错

如果用的是Vue Router 3.1.0+版本，重复跳转相同路由会抛出NavigationDuplicated错误，你可以给push加个空catch避免控制台报错：

this.$router.push({query: targetQuery }).catch(() => {})

内容的提问来源于stack exchange，提问作者morteza mortezaie