Vue-router 使用编程式导航多次执行会报错NavigationDuplicated的解决方法

路由跳转有以下两种方式：
1.声明式导航: router-link,需要to属性，可以实现路由的跳转
2.编程式导航: 利用的是组件的实例 $route.push|replace 方法，可以实现路由的跳转

编程式导航跳转到当前路由时，多次执行会抛出 NavigationDuplicated的警告错误。

声明式导航没有此类错误，因为 vue-rourer底层已经处理好了

为什么编程式导航进行路由跳转的时候，就有这种警告错误呢？

“vue-router”: “^3.5.3”: 最新版的vue-router 引入promise，而push函数没有传入成功和失败的函数

怎么解决呢？
1.通过给push方法传递相应的成功、失败的回调函数，可以捕获到当前错误，可以解决。

this.$route.push({name:"search",params:{},query:{}},()=>{},()=>{})

这种写法: 治标不治本，将来在别的组件当中push|replace, 编程式导航还是有类似错误。

2.通过底层的代码，可以解决这个错误

通过重写VueRouter.prototype身上的replace和push方法来解决上面的异常。

//先把VueRouter原型对象的push,先保存一份
let originPush = VueRouter.prototype.push;//第一个参数: 告诉原来push 方法，你往哪里跳转(传递哪些参数)
VueRouter.prototype.push = function(location, resolve, reject) {//第一个形参：路由跳转的配置对象（query|params）//第二个参数：undefined|箭头函数（成功的回调）//第三个参数:undefined|箭头函数（失败的回调）if (resolve && reject) {//push方法传递第二个参数|第三个参数（箭头函数）//originPush：利用call修改上下文，变为(路由组件.$router)这个对象，第二参数：配置对象、第三、第四个参数：成功和失败回调函数originPush.call(this, location, resolve, reject);} else {//push方法没有产地第二个参数|第三个参数originPush.call(this,location,() => {},() => {});}
};//重写VueRouter.prototype身上的replace方法了
VueRouter.prototype.replace = function(location, resolve, reject) {if (resolve && reject) {originReplace.call(this, location, resolve, reject);} else {originReplace.call(this,location,() => {},() => {});}
};

Vue-router 使用编程式导航多次执行会报错NavigationDuplicated的解决方法相关推荐

eslint 验证vue文件报错 unexpected token =解决方法
eslint 验证vue文件报错 unexpected token =解决方法参考文章: (1)eslint 验证vue文件报错 unexpected token =解决方法 (2)https: ...
Vue页面与页面之间的传值（router.push()编程式导航）
页面与页面之间跳转传值,其实我们一般用两种,query传参或者用params 其实这两个方式都是页面导航的一种,编程式导航:通过调用JavaScript形式的API实现导航的方式,大家不了解的可以去官 ...
vue router连续点击多次路由报错根本原因和解决方法
原因: vue-router 升级到 3.1.x 后,重复点击导航时,控制台出现报错 ,vue router ≥ v3.1 后 ,回调形式改成 promise api 了,返回的是 promise,如 ...
031_vue编程式导航
1. 页面导航的两种方式 1.1. 声明式导航: 通过点击链接实现导航的方式, 叫做声明式导航.例如: 普通网页中的<a></a>链接或vue中的<router-link ...
vue 刷新嵌套路由_vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法...
解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下一. 异常描述本来使用的是vue-router的hash模式,但是hash模式下url需要带&q ...
页面导航的两种方式——声明式导航、编程式导航||vue-router编程式导航||router.push() 方法的参数规则
页面导航的两种方式 vue-router编程式导航编程式导航基本用法 <!DOCTYPE html> <html lang="en"><head&g ...
Vue.js-Day05【安装路由（vue-router）、如何使用vue-router、404配置、激活class、动态路由、编程式导航、路由嵌套、路由元信息、导航拦截】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.单页面应用 1.1.多页面应用 1.2.单页面应用 1.3.vue-router 2.安装vue-rout ...
前端笔记(11) Vue3 Router 编程式导航 router.push router.replace
什么是编程式导航? 在上篇博客Vue3 Router 监听路由参数变化中,我们使用 <router-link> 创建 a 标签来定义导航链接: <router-link to=&qu ...
vue编程式导航，命名路由
//使用 window.location.href 的形式,叫做编程式导航绑定事件的形式 <template><div class="goods-item" ...

Vue-router 使用编程式导航多次执行会报错NavigationDuplicated的解决方法

Vue-router 使用编程式导航多次执行会报错NavigationDuplicated的解决方法相关推荐

最新文章

热门文章