I'm facing an issue with my navigation header setup. It includes a search bar that redirects users to the home view with the search query as a parameter. Here's the code snippet for reference:
<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>
After implementing this, I encountered an error message
"NavigationDuplicated: Avoided redundant navigation to current location"home view. This error seems to occur because I'm trying to navigate to the same route. Can you suggest a better approach to achieve the desired functionality without triggering this error?