vue-router：当以前的查询用相同的值重写时，为什么要监视 $route 触发器

Question

我的项目中有一个 button，当我点击它时，两个 queries 添加到 URL

onClickBtn(){
   this.$router.push({queries: {name:'kevin' , age:21} })
}

我在 $route

上有一个 watch

watch:{
   $route:function(){
       // call API
   }
}

当我点击那个 button 几次时

watch 每次都给我的 API 打电话，尽管 什么都没有 改变了

这给我造成了问题

因为没有在route中改变但是API被调用和 相同的数据 是

收到。

我应该怎么做才能避免在watch中调用API，当queries没有改变时??

Answer 1

你在路由器上推送的对象总是不同的，这就是启动 $route watch 的原因。您可以比较您在手表中收到的数据，以便当它们不同时调用 API:

watch:{
   '$route' (newRoute, lastRoute){
       // Check if query is different
       // call API
   }
}

Answer 2

除了的答案之外，您甚至可以在将新对象推送到路由器之前仔细检查您的内容是否已更改。

像这样

checkIfUpdateNeeded && this.$router.push({queries: {name: 'kevin', age:21 } })

这样一来，您将拥有更少的移动部件，并且您不会在观察器中触发“无”，尤其是当您推动一个更大的物体并希望在两个物体之间进行深度区分时.

vue-router : why watch on $route trigger when previous queries rewrite with same values