时间戳

首页 > 解决方案 > 尝试使用查询推送路线时出现“NavigationDuplicated：避免冗余导航到当前位置”错误

javascript - 尝试使用查询推送路线时出现“NavigationDuplicated：避免冗余导航到当前位置”错误

问题描述

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

<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"。我知道我收到错误是因为我试图走同一条路线，但我不确定我还能怎么做。

标签： javascriptvue.jsvuejs2vue-router

解决方案

您可以使用以下方法解决该错误.catch：

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

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

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

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

推荐阅读