亲测解决 :Navigation cancelled from “xxx“ to “xxx“ with a new navigation

亲测解决 :Navigation cancelled from “xxx“ to “xxx“ with a new navigation使用vue3.0写了一个登入页面,再点击登入的时候,第一次点击会没有反应,F12查看接口都调用了但是没有跳转,控制台打印出错:错误说有异常没有捕获;这个错误是vue-router内部的错误,没有进行catch处理导致的;再vue-router3.0以上的版本新增功能:push和replace方法会返回一个promise;解决方案:在vue的router的js中添加下面代码constoriginalPush=VueRouter.prototype.pushconstorigin

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

使用vue 3.0 写了一个登入页面,再点击登入的时候,第一次点击会没有反应,F12查看接口都调用了但是没有跳转,控制台打印出错:
亲测解决 :Navigation cancelled from “xxx“ to “xxx“ with a new navigation

错误说有异常没有捕获;

这个错误是vue -router 内部的错误,没有进行catch处理导致的;

再vue-router3.0以上的版本新增功能:push和replace方法会返回一个promise;

解决方案:

在vue的router的js中添加下面代码

const originalPush = VueRouter.prototype.push
const originalReplace = VueRouter.prototype.replace
// push
VueRouter.prototype.push = function push (location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}
// replace
VueRouter.prototype.replace = function push (location, onResolve, onReject) {
  if (onResolve || onReject) return originalReplace.call(this, location, onResolve, onReject)
  return originalReplace.call(this, location).catch(err => err)
}

其中VueRouter是在vue初始化的时候引入的Router,完整代码:router/index.js

import VueRouter from 'vue-router'

Vue.use(VueRouter);
// 解决报错
const originalPush = VueRouter.prototype.push
const originalReplace = VueRouter.prototype.replace
// push
VueRouter.prototype.push = function push (location, onResolve, onReject) {
    console.log(onReject + onResolve)
  // if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => {
      console.log(err)
      originalPush.call(this, location, onResolve, onReject)
  });
}
// replace
VueRouter.prototype.replace = function push (location, onResolve, onReject) {
    console.log(onReject + onResolve)
  // if (onResolve || onReject) return originalReplace.call(this, location, onResolve, onReject)
  return originalReplace.call(this, location).catch(err => {
      console.log(err)
      originalPush.call(this, location, onResolve, onReject)
  })
}

.......

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/158918.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • J2EE项目系列(三)–Spring Data JPA+Spring+SpringMVC+Maven快速开发(1)项目架构

    J2EE项目系列(三)–Spring Data JPA+Spring+SpringMVC+Maven快速开发(1)项目架构好久没给大家弄Java后端项目系列了,因为接了Java后端外包以及学习一些后端优化的东西。而现在开始慢慢在这个系列的(三)逐渐把后端外包的一些有价值的东西分享给大家,并且自己也总结一遍嘛。本博客是这个系列的第一篇,所以先讲下项目架构。另外,这个系列还有一些我在外包项目过程中做的优化,七牛云,云旺IM等使用,以及解决一些小bug等等技巧。

    2022年6月6日
    34
  • pychar激活码3月最新在线激活

    pychar激活码3月最新在线激活,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月14日
    52
  • Activity启动模式singleTask的理解

    Activity启动模式singleTask的理解1.Activity启动模式singleTask的理解2.Task与Activity栈3.singleTask设置方式4.singleTask的意义(作用)4.1.举例说明4.2.例子14.3.例子24.4.小结5.taskAffinity属性5.1.配置方式5.2.意义(作用)5.3.举例5.4.回退顺序5.5.总结1.Activity启动模式singleTask的理解2.Task与Activity栈Task是一些Acti..

    2022年6月26日
    20
  • 方法区元空间实现之jdk7和8字符串常量池、运行时常量池、静态变量到底在哪?

    方法区元空间实现之jdk7和8字符串常量池、运行时常量池、静态变量到底在哪?方法区(落地实现jdk7永久代,jdk8元空间),元空间并不在虚拟机中,而是使用本地内存1、此区域是线程共享的。储存已加载的类信息、常量、静态变量、即时编译器编译后的代码等数据;2、常量池:编译器生成的各种字面量和符号引用;3、关于字符串常量池和运行时常量池的位置说明:jdk1.6存在永久代,字符串常量池、运行时常量池都是在永久代中;jdk1.7存在永久代,字符串常量池被移动到了堆当中,运行时常量池还是在永久代中;jdk1.8不存在永久代,实现形式是元空间,字符串常量池仍然在堆当中,运行.

    2022年5月23日
    42
  • 三种权限设计方案「建议收藏」

    三种权限设计方案「建议收藏」三种权限设计方案的归纳和比较权限设计是很多系统重要的组成部分,主要用于控制功能和流程,本文将几种常见的权限设计方案(权限系统的名都是自己起的)的基本设计写出来,其中不恰当处还请大家指出,我们来讨论一下.1.等级权限系统    这种权限系统在论坛中很常见,在这种系统中,权限级别如同官阶从低到高排列,每个用户拥有一个权限,其中设定了这个用户的权限等级,在用户需要执行操作前先查看

    2022年7月16日
    18
  • mapminmax 用法

    mapminmax 用法mapminmax是MATLAB实现归一化的工具包,默认:(1)将矩阵的每行分别进行归一化;(2)每行的最大值最小值作为每行归一化的xmin和xmax;(3)将数据归一化到[-1,1].若要将数据归一化到0到1之间,即y∈[0,1],使用b=mapminmax(a,0,1);若给与确定的最大值和最小值作为每行的xmin和xmax,使用:b= mapminmax(a,0,1);PS.xmin…

    2022年6月30日
    29

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号