When I want to do a search multiple times it shows me the NavigationDuplicated error. My search is in the navbar and the way I have configured the search is to take the value using a model and then pass the value as a parameter to the ContentSearched component, and then receive the value of the search in that component.

I know the right way is to use an emitter, but I still don't know how to learn to use it. To access the emit is context.emit('', someValue)

NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "Navigating to current location ("/search") is not allowed", stack: "Error↵    at new NavigationDuplicated (webpack-int…node_modules/vue/dist/vue.runtime.esm.js:1853:26)"}

NavBar.vue

<template>

  <nav class="navbar navbar-expand-lg navbar-dark bg-nav" v-bind:class="{'navbarOpen': show }">

    <div class="container">

      <router-link to="/" class="navbar-brand">

        <img src="../assets/logo.png" alt="Horizon Anime" id="logo">

      </router-link>



      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" v-on:click.prevent="toggleNavbar">

        <span class="navbar-toggler-icon"></span>

      </button>



      <div class="collapse navbar-collapse" id="navbarSupportedContent" v-bind:class="{'show': show }">

        <ul class="navbar-nav mr-auto">

          <li class="nav-item">

            <router-link class="nav-link" to="/" ><i class="fas fa-compass"></i> Series</router-link>

          </li>

          <li class="nav-item">

            <router-link class="nav-link" :to="{name: 'EpisodesSection'}" ><i class="fas fa-compact-disc"></i> Episodios</router-link>

          </li>

          <li class="nav-item">

            <router-link class="nav-link" :to="{name: 'MovieSection'}" ><i class="fas fa-film"></i> Peliculas</router-link>

          </li>

        </ul>

        <div class="search-bar">

          <form class="form-inline my-2 my-lg-0">

            <input class="form-control mr-sm-2" v-model="query" type="search" placeholder="Buscar películas, series ..." aria-label="Search">

            <button class="btn btn-main my-2 my-sm-0" @click.prevent="goto()" type="submit"><i class="fas fa-search"></i></button>

          </form>

        </div>

      </div>

    </div>

  </nav>

</template>



<script>

  import {value} from 'vue-function-api';

  import {useRouter} from '@u3u/vue-hooks';



  export default {

    name: "NavBar",

    setup(context){

      const {router} = useRouter();

      const query = value("");



      let show = value(true);

      const toggleNavbar = () => show.value = !show.value;      

      

      const goto = () =>{

        let to = {name: 'ContentSearched' , params:{query: query}}

        router.push(to);

      };

        

      return{

        show,

        toggleNavbar,

        goto,

        query

      }

    }

  }

</script>

ContentSearched.vue

<template>

   <div class="container">

     <BoxLink/>

    <main class="Main">

      <div class="alert alert-primary" role="alert">

        Resultados para "{{query}}"

      </div>

      <div v-if="isLoading">

        <!-- <img class="loading" src="../assets/loading.gif" alt="loading"> -->

      </div>

      <div v-else>

        <ul class="ListEpisodios AX Rows A06 C04 D02">

          <li v-for="(content, index) in contentSearched" :key="index">

            <div v-if="content.type === 'serie'">

              <Series :series="content"/>

            </div>

            <div v-if="content.type === 'pelicula'">

              <Movies :movies="content"/>

            </div>

          </li>

        </ul>

      </div>

    </main>

  </div>

</template>





<script>

  import {onCreated} from "vue-function-api"

  import {useState , useRouter , useStore} from '@u3u/vue-hooks';

  import BoxLink from "../components/BoxLink";

  import Movies from "../components/Movies";

  import Series from "../components/Series";



  export default{

    name: 'ContentSearched',

    components:{

      BoxLink,

      Movies,

      Series

    },

    setup(context){

      const store = useStore();

      const {route} = useRouter();



      const state = {

        ...useState(['contentSearched' , 'isLoading'])

      };



      const query = route.value.params.query;



      onCreated(() =>{

        store.value.dispatch('GET_CONTENT_SEARCH' , query.value);

      });

      return{

        ...state,

        query,

      }

    }

  };

</script>