1.错误示例

如在多次点击搜索按钮进行编程式路由跳转时控制台会出现报错NavigationDuplicated

2.分析错误产生原因

原因是在vue-router3.1.0之后, 引入了promise的语法。如果路由跳转时里面的参数没有改变，会返回一个失败的promise，如果不去处理这个失败的promise，就会抛出这个错误。而声明式路由导航不会出现这种错误，因为Vue在底层已经处理好了。

3.解决办法

方法一

我们可以在使用push和replace进行跳转时，手动的传入成功与失败的回调。

this.$router.push({name: "search",params: {......},query: {......},},() => {},//成功回调() => {},//失败回调
);

这种方法适用于页面较少，使用编程式路由跳转次数较小的情况下使用。如果页面较多，可以对VueRouter的push和replace方法进行重写。

方法二

重写push和replace方法
在路由文件中写入以下代码

//重写push|replace方法
//先把VueRouter原型对象的push和replace保存一份
let originPush = VueRouter.prototype.push;
let originReplace = VueRouter.prototype.replace;//重写push
VueRouter.prototype.push = function (location, resolve, reject) {//如果用户传入了成功与失败的回调if (resolve && reject) {originPush.call(this, location, resolve, reject);//注意此处需要使用call方法来改变originPush的this指向，因为需要保证重定义的push方法的上下文相同} else {originPush.call(this,location,() => {},() => {});}// 如果用户没传入就手动设置传入
};//重写push
VueRouter.prototype.replace = function (location, resolve, reject) {//如果用户传入了成功与失败的回调if (resolve && reject) {originReplace.call(this, location, resolve, reject);//注意此处需要使用call方法来改变originPush的this指向，因为需要保证重定义的push方法的上下文相同} else {originReplace.call(this,location,() => {},() => {});}// 如果用户没传入就手动设置传入
};```
这样就完成了push与replace的重写，使用后发现连续点击跳转，控制台也不会出现报错的情况了。

编程式路由导航连续跳转出现NavigationDuplicated报错的问题相关推荐

编程式路由导航和withRouter
编程式路由导航如果想使用按钮实现路由跳转,有两种形式,可回退和不可回退两种: 由于history被放在props中,可以直接通过this.props.history的push和replace改变可 ...
Vue 编程式路由导航
文章目录 router- link的replace属性编程式路由导航缓存路由组件两个新的生命钩子 router- link的replace属性 1.作用:控制路由跳转时操作浏览器历史记录的模式 ...
Vue -- 编程式路由导航
文章目录 1. 声明式导航 & 编程式导航 1.1 声明式导航 1.2 编程式导航 2. vue-router 中的编程式导航 API 2.1 常用的编程式导航 API 2.2 \$route ...
Vue声明式路由导航和编程式路由导航的优缺点及实现方法
文章目录前言路由实现 1.目标 2.前置条件 <1>安装vue-router插件 <2>写个用于转跳的组件页 <3>写路由文件 <4>写路由锚点 3 ...
Day31_编程式路由导航
提出需求 1.观察this.$router 上有什么 (push replace) 2.实现this$router.push查看 1>在message组件里面: 3.实现this$rou ...
Vue教程6【完结】【vue-router】路由，路由传参，编程式路由导航，缓存路由组件，路由守卫，路由模式，vue ui组件库
vue-router 了解 vue插件库,用来实现SPA应用(单页面) 整个页面只有一个完整的页面点击页面中导航链接,不会刷新页面,只做局部更新数据通过ajax请求路由的理解一组映射关系(ke ...
【React路由】编程式路由导航和withRouter的使用——push / replace
文章目录
vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）
this.$router.push进行编程式路由跳转传参 router中路由配置组件home点击传参组件homeDetails接受参数 router中路由配置 params第一种传参路由配置 {p ...
vue-router常见问题解决方案。（滚轴回到顶部、页面跳转同一页面报错、手机电脑端路由跳转）
当页面跳转后,侧边滚轴会还是一个页面位置 //路由跳转后,页面回到顶部 router.afterEach(() => {document.body.scrollTop = 0;document. ...

编程式路由导航连续跳转出现NavigationDuplicated报错的问题

1.错误示例

2.分析错误产生原因

3.解决办法

方法一

方法二

编程式路由导航连续跳转出现NavigationDuplicated报错的问题相关推荐

最新文章

热门文章