NavigationDuplicated 导航到当前位置 ("/search") 是不允许的

IT技术 javascript vue.js vuejs2
2021-01-24 19:21:38

当我想多次搜索时,它会向我显示NavigationDuplicated错误。我的搜索在导航栏中,我配置搜索的方式是使用模型获取值,然后将该值作为参数传递给 ContentSearched 组件,然后在该组件中接收搜索的值。

我知道正确的方法是使用发射器,但我仍然不知道如何学习使用它。访问发射是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)"}

导航栏.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>

内容搜索.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>
6个回答

当我router-link指向同一条路线时,这发生在我身上例如/products/1

用户可以点击产品,但是如果产品已经被点击(并且组件视图已经加载)并且用户尝试再次点击它,错误/警告会显示在控制台中。

您可以在 github 问题上了解更多信息。.

Posva,vue-router 的主要贡献者之一建议:

router.push('你的路径').catch(err => {})

但是,如果您不想要一个catch什么都不做的块,为了解决这个问题,您可以将路由器导航与当前路线进行比较,并且仅在它们不同时才进行导航:

const path = `/products/${id}`
if (this.$route.path !== path) this.$router.push(path)

注意:$route是 vue-router 提供给每个组件的对象。有关更多信息,请参阅路由对象

请注意,此解决方案还会阻止您从/showPhoto?photo_id=1/showPhoto?photo_id=2因此,尝试/捕获它可能更容易-有关更多详细信息,请参阅stackoverflow.com/a/65326844
2021-04-11 19:21:38

如果我们不打算进一步Router.push用作异步调用,我认为可以在根级别实现此问题的最佳解决方案

import Router from 'vue-router';

const originalPush = Router.prototype.push;
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
};

Vue.use(Router);
@TechNomad 您可以使用$router.beforeEach'hook 并在该使用next(false)中终止导航
2021-03-20 19:21:38
哈利lua!尽管即使在使用路由器链接时我也遇到了这个错误!在 Github posva 上声称只有在使用 router.push() 时才需要这种解决方法,而不是路由器链接。知道为什么我在使用路由器链接时仍然出现这个错误(并在使用你的代码时摆脱)?
2021-03-25 19:21:38
@TechNomad,NavigationDuplicated 是在$router.beforeEach调用之前生成的
2021-03-29 19:21:38

如果你对捕捉所有类型的错误感到不舒服,我认为这个实现更体贴:

this.$router.push("path").catch(error => {
  if (error.name != "NavigationDuplicated") {
    throw error;
  }
});

截至 2021 年,全球配置:

我只想让NavigationDuplicated错误保持沉默,一个空的捕获可能是危险的。所以我这样做了:

const router = new VueRouter({/* ... */})

const originalPush = router.push
router.push = function push(location, onResolve, onReject)
{
    if (onResolve || onReject) {
        return originalPush.call(this, location, onResolve, onReject)
    }
 
    return originalPush.call(this, location).catch((err) => {
        if (VueRouter.isNavigationFailure(err)) {
            return err
        }
   
        return Promise.reject(err)
    })
}

初始化 vue-router 时插入一次。
感谢@Oleg Abrazhaev的更新。

2021-04-04 19:21:38

如果您在代码中使用 router.push 并且不关心导航失败,则应该使用 catch 来捕获它:

router.push('/location').catch(err => {})