本文介绍了NavigationDuplicated 导航到当前位置 (“/search") 是不允许的的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我想多次搜索时，它会向我显示 NavigationDuplicated 错误.我的搜索在导航栏中，我配置搜索的方式是使用模型获取值，然后将该值作为参数传递给 ContentSearched 组件，然后在该组件中接收搜索值.
我知道正确的方法是使用发射器，但我仍然不知道如何学习使用它.访问发射是 context.emit('', someValue)
NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "Navigate 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
<nav class="navbar navbar-expand-lg navbar-dark bg-nav";v-bind:class="{'navbarOpen': show }"><div class="container"><router-link to="/";class =导航栏品牌"><img src="../assets/logo.png";alt=地平线动漫"id=标志"></路由器链接><button class="navbar-toggler";类型=按钮"数据切换=折叠"数据目标=#navbarSupportedContent"；aria-controls="navbarSupportedContent";aria-expanded="false";aria-label="切换导航";v-on:click.prevent="toggleNavbar"><span class="navbar-toggler-icon"></span><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";到=/"><i class=fas fa-compass"></i>系列</router-link><li class="nav-item"><router-link class="nav-link";:to="{name: 'EpisodesSection'}";><i class=fas fa-compact-disc"></i>Episodios</router-link><li class="nav-item"><router-link class="nav-link";:to="{name: 'MovieSection'}";><i class=fas fa-film"></i>Peliculas</router-link><div class="search-bar"><form class="form-inline my-2 my-lg-0"><input class="form-control mr-sm-2";v-model=查询"类型=搜索"placeholder="Buscar películas, series ...";aria-label =搜索"><button class="btn btn-main my-2 my-sm-0";@click.prevent="goto()";type="submit"><i class="fas fa-search"></i></button></表单>
</nav><脚本>从 'vue-function-api' 导入 {value}；从@u3u/vue-hooks"导入 {useRouter}；导出默认{名称:导航栏"，设置(上下文){const {router} = useRouter();const 查询 = 值(")；让显示 = 值(真)；const toggleNavbar = () =>show.value = !show.value;const goto = () =>{让 to = {name: 'ContentSearched' , params:{query: query}}路由器推送(到)；};返回{展示，切换导航栏，去，询问}}}
ContentSearched.vue
<div class="container"><BoxLink/><主类=主"><div class="alert alert-primary";角色=警报">结果段{{query}}"
<div v-if=isLoading"><!-- <img class="loading";src="../assets/loading.gif";alt=加载">-->
<div v-else><ul class="ListEpisodios AX Rows A06 C04 D02"><li v-for="(content, index) in contentSearched";:key=索引"><div v-if="content.type === 'serie'"><系列:系列=内容"/>
<div v-if="content.type === 'pelicula'"><电影:电影=内容"/>
</main>
<脚本>从vue-function-api"导入{onCreated}；从@u3u/vue-hooks"导入 {useState , useRouter , useStore};从../components/BoxLink"导入 BoxLink；从../components/Movies"导入电影；从../components/Series"导入系列；导出默认{name: '内容搜索',成分:{盒子链接，电影，系列},设置(上下文){const store = useStore();const {route} = useRouter();常量状态 = {...useState(['contentSearched' , 'isLoading'])};const 查询 = route.value.params.query;onCreated(() =>{store.value.dispatch('GET_CONTENT_SEARCH' , query.value);});返回{...状态，询问，}}};
解决方案
当我有一个 router-link 指向同一条路线时，这发生在我身上.例如/products/1.
用户可以点击产品，但是如果产品已经被点击(并且组件视图已经加载)并且用户尝试再次点击它，错误/警告显示在控制台中.
您可以在 关于 github 问题了解更多信息..
vue-router 的主要贡献者之一 Posva 建议:
router.push('your-path').catch(err => {})
但是，如果您不想有一个什么都不做的 catch 块，为了解决这个问题，您可以将路由器导航与当前路线进行比较并且仅在以下情况下进行导航它们不同:
const path = `/products/${id}`if (this.$route.path !== path) this.$router.push(path)
注意:$route 是 vue-router 提供给每个组件的对象.请参阅路由对象了解更多信息.
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>
解决方案
This happened to me when I had a router-link pointing to the same route. e.g. /products/1.
You can learn more on the github issue..
Posva, one of the main contributors of vue-router suggests:
However, if you don't want to have a catch block which does nothing, in order to solve the issue you can compare the router navigation with the current route and only navigate if they differ:
const path = `/products/${id}`
if (this.$route.path !== path) this.$router.push(path)
Note: $route is an object provided by vue-router to every component. See The Route Object for more info.
这篇关于NavigationDuplicated 导航到当前位置 (“/search") 是不允许的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
07-22 13:24
