vue router连续点击多次路由报错

在编程式导航跳转时候，连续点击多次会报NavigationDuplicated错误

  this.$router.push({name: "search"});

出现这种错误原因是因为vue-router引入了promise,当我们使用this.$router.push时候需要多添加成功或失败的回调，否则就会报出以上的错误。

这时如果我们加入成功和失败的回调，就不会报错：

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

虽然解决了报错，但如果有多个路由跳转，这样每次都要在后面加两个回调函数，显得很繁琐，所以我们可以用另一个办法，一次性解决问题。

我们在引入vue-router所在文件下重写push和replace方法：

import VueRouter from 'vue-router';
//保存原型对象的Push
let originPush = VueRouter.prototype.push
let originReplace = VueRouter.prototype.replace
//重写push方法
VueRouter.prototype.push = function (location, res, rej) {if (res && rej) {originPush.call(this, location, res, rej)}else {originPush.call(this, location, () => { }, () => { })}}
//重写replace方法
VueRouter.prototype.replace = function (location, res, rej) {if (res && rej) {originReplace.call(this, location, res, rej)}else {originReplace.call(this, location, () => { }, () => { })}}

至此我们成功解决问题，

vue router连续点击多次路由报错相关推荐

vue router连续点击多次路由报错根本原因和解决方法
原因: vue-router 升级到 3.1.x 后,重复点击导航时,控制台出现报错 ,vue router ≥ v3.1 后 ,回调形式改成 promise api 了,返回的是 promise,如 ...
解决vue项目重复点击跳转路由报错以及路由重定向的问题
// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题 const originalPush = VueRouter.prototype.push VueRout ...
解决vue项目中重复点击导航路由报错
vue版本 "vue": "^2.6.11", 主要代码 //重复点击导航路由报错 const originalPush = VueRouter.prototy ...
vue 解决重复点击导航路由报错问题
// 解决重复点击导航路由报错 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function pu ...
vue重复路由报错解决
vue重复路由报错解决 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation- 分为三种解决方式 1.捕获异 ...
vue重复访问同一路由报错
vue重复访问同一路由报错 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) // 重写router的push ...
vue router返回到指定的路由
vue router返回到指定的路由一.项目场景二.问题描述三.原因分析四.解决方案一.项目场景项目场景:示例:A(商品详情)--B(商品购买页面)-C(支付成功页面)--D(订单页面) ...
vue项目在vscode中编译eslint报错没显示红色波浪线提示
vue项目在vscode中编译eslint报错没显示红色波浪线提示. 如下图所示: 下图是预期效果: 不符合Eslint校验规则的代码位置都能展示出来,这样一目了然.能帮助我们迅速找到报错的位置. 然 ...
.vue文件在webstorm中es6语法报错解决方法
.vue文件在webstorm中es6语法报错解决方法参考文章: (1).vue文件在webstorm中es6语法报错解决方法 (2)https://www.cnblogs.com/yuqing6/ ...

vue router连续点击多次路由报错

vue router连续点击多次路由报错相关推荐

最新文章

热门文章