尝试使用查询推送路由时出现"NavigationDuplicated: Avoided redundant navigation to current location"错误

Question

我有一个导航标题，其中包含一个搜索栏，将用户重定向到主视图，并将搜索栏值作为查询，如下所示：

<template lang="html">
<div class="search-by-query">
<input type="text" :model="searchQuery">
<div @click="search()">Search</div>
</div>
</template>
<script>
import router from "../router"
export default {
data(){
return {
searchQuery: ""
}
},
methods: {
search(){
router.push({ name: "home", query: { searchQuery: this.query }})
}
}
}
</script>

问题是，当我从home视图内部执行该函数时，我会得到这个错误"NavigationDuplicated: Avoided redundant navigation to current location"。我知道我之所以会出错，是因为我试图走同一条路线，但我不确定还能怎么做。

Answer 1

您可以使用.catch:解决错误

export default {
methods: {
search() {
this.$router.push(...).catch(() => { /* ignore */ })
}
}
}

或者在模板中使用router-link：

<router-link :to="{ name: 'home', query: { searchQuery: query } }">Search</router-link>

请注意，您的问题显示了名为searchQuery的data道具，但您在router.push()中将其称为query。