title: NavigationDuplicated Navigating to current location ("/search") is not allowed
body: <p>When I want to do a search multiple times it shows me the <code>NavigationDuplicated</code> 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.</p>
  <p>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 <code>context.emit('', someValue)</code></p>
  <pre class="lang-sh prettyprint-override"><code>NavigationDuplicated {_name: &quot;NavigationDuplicated&quot;, name: &quot;NavigationDuplicated&quot;, message: &quot;Navigating to current location (&quot;/search&quot;) is not allowed&quot;, stack: &quot;Error↵    at new NavigationDuplicated (webpack-int…node_modules/vue/dist/vue.runtime.esm.js:1853:26)&quot;}
  </code></pre>
  <p><strong>NavBar.vue</strong></p>
  <pre><code>&lt;template&gt;
    &lt;nav class=&quot;navbar navbar-expand-lg navbar-dark bg-nav&quot; v-bind:class=&quot;{'navbarOpen': show }&quot;&gt;
      &lt;div class=&quot;container&quot;&gt;
        &lt;router-link to=&quot;/&quot; class=&quot;navbar-brand&quot;&gt;
          &lt;img src=&quot;../assets/logo.png&quot; alt=&quot;Horizon Anime&quot; id=&quot;logo&quot;&gt;
        &lt;/router-link&gt;
  
        &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot; v-on:click.prevent=&quot;toggleNavbar&quot;&gt;
          &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
        &lt;/button&gt;
  
        &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot; v-bind:class=&quot;{'show': show }&quot;&gt;
          &lt;ul class=&quot;navbar-nav mr-auto&quot;&gt;
            &lt;li class=&quot;nav-item&quot;&gt;
              &lt;router-link class=&quot;nav-link&quot; to=&quot;/&quot; &gt;&lt;i class=&quot;fas fa-compass&quot;&gt;&lt;/i&gt; Series&lt;/router-link&gt;
            &lt;/li&gt;
            &lt;li class=&quot;nav-item&quot;&gt;
              &lt;router-link class=&quot;nav-link&quot; :to=&quot;{name: 'EpisodesSection'}&quot; &gt;&lt;i class=&quot;fas fa-compact-disc&quot;&gt;&lt;/i&gt; Episodios&lt;/router-link&gt;
            &lt;/li&gt;
            &lt;li class=&quot;nav-item&quot;&gt;
              &lt;router-link class=&quot;nav-link&quot; :to=&quot;{name: 'MovieSection'}&quot; &gt;&lt;i class=&quot;fas fa-film&quot;&gt;&lt;/i&gt; Peliculas&lt;/router-link&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class=&quot;search-bar&quot;&gt;
            &lt;form class=&quot;form-inline my-2 my-lg-0&quot;&gt;
              &lt;input class=&quot;form-control mr-sm-2&quot; v-model=&quot;query&quot; type=&quot;search&quot; placeholder=&quot;Buscar películas, series ...&quot; aria-label=&quot;Search&quot;&gt;
              &lt;button class=&quot;btn btn-main my-2 my-sm-0&quot; @click.prevent=&quot;goto()&quot; type=&quot;submit&quot;&gt;&lt;i class=&quot;fas fa-search&quot;&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import {value} from 'vue-function-api';
    import {useRouter} from '@u3u/vue-hooks';
  
    export default {
      name: &quot;NavBar&quot;,
      setup(context){
        const {router} = useRouter();
        const query = value(&quot;&quot;);
  
        let show = value(true);
        const toggleNavbar = () =&gt; show.value = !show.value;      
        
        const goto = () =&gt;{
          let to = {name: 'ContentSearched' , params:{query: query}}
          router.push(to);
        };
          
        return{
          show,
          toggleNavbar,
          goto,
          query
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  <p><strong>ContentSearched.vue</strong></p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
     &lt;div class=&quot;container&quot;&gt;
       &lt;BoxLink/&gt;
      &lt;main class=&quot;Main&quot;&gt;
        &lt;div class=&quot;alert alert-primary&quot; role=&quot;alert&quot;&gt;
          Resultados para &quot;{{query}}&quot;
        &lt;/div&gt;
        &lt;div v-if=&quot;isLoading&quot;&gt;
          &lt;!-- &lt;img class=&quot;loading&quot; src=&quot;../assets/loading.gif&quot; alt=&quot;loading&quot;&gt; --&gt;
        &lt;/div&gt;
        &lt;div v-else&gt;
          &lt;ul class=&quot;ListEpisodios AX Rows A06 C04 D02&quot;&gt;
            &lt;li v-for=&quot;(content, index) in contentSearched&quot; :key=&quot;index&quot;&gt;
              &lt;div v-if=&quot;content.type === 'serie'&quot;&gt;
                &lt;Series :series=&quot;content&quot;/&gt;
              &lt;/div&gt;
              &lt;div v-if=&quot;content.type === 'pelicula'&quot;&gt;
                &lt;Movies :movies=&quot;content&quot;/&gt;
              &lt;/div&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/main&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
    import {onCreated} from &quot;vue-function-api&quot;
    import {useState , useRouter , useStore} from '@u3u/vue-hooks';
    import BoxLink from &quot;../components/BoxLink&quot;;
    import Movies from &quot;../components/Movies&quot;;
    import Series from &quot;../components/Series&quot;;
  
    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(() =&gt;{
          store.value.dispatch('GET_CONTENT_SEARCH' , query.value);
        });
        return{
          ...state,
          query,
        }
      }
    };
  &lt;/script&gt;
  </code></pre>