亲测解决 :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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • lseek函数

    lseek函数转自:https://baike.baidu.com/item/lseek/6385407?fr=aladdin相关函数dup,open,fseek表头文件#include#include定义函数off_tlseek(intfilde,off_toffset,intwhence);

    2022年6月29日
    29
  • sftp使用方法_sftp服务

    sftp使用方法_sftp服务参考: https://baike.baidu.com/item/sftp参考:https://www.jianshu.com/p/64d571913185    要谈sftp(SSHFileTransferProtocol),首先要谈ftp(FileTransferProtocol),大家都知道ftp是文件传输协议,它基于tcp协议,可以用来发送文件。刚开始学web开发的时候,接…

    2022年10月7日
    2
  • 用中的linux驱动 platform_device

    用中的linux驱动 platform_device原文出自:http://blog.csdn.net/ghostyu/article/details/6908805一个现实的linux设备和驱动通常要挂接在一种总线上,像pci,usb,iic,spi等都是总线结构,这当然不是问题,但是嵌入式系统中,Soc系统集成的独立外设控制器,挂接在soc内存空间的外设等却不依附于此类总线。基于这个背景,linux发明了一种虚拟总线:platfor

    2022年7月24日
    12
  • [Warning] large integer implicitly truncated to unsigned type [-Woverflow][通俗易懂]

    [Warning] large integer implicitly truncated to unsigned type [-Woverflow][通俗易懂][Warning]largeintegerimplicitlytruncatedtounsignedtype[-Woverflow]警告的原因是:整数溢出整数溢出:当整数达到它所能表述的最大值时,会重新从起点开始#include<stdio.h>intmain(void){ unsigneda=12345678910; printf(“a=%d\n”,a); return0;}该程序输出以后并不是输出a=12345678910而是:上面的代码

    2022年7月25日
    8
  • Mac虚拟机联网(vmware虚拟机怎么联网)

    下载VMwareFusion安装,下载centOS7镜像并安装虚拟机查看本机的vmnet1和vmnet8MAC系统下通过终端的ifconfig命令可以得知当前主机的vmnet1(192.168.118.1)和vmnet8(192.168.2.1) 仅主机模式下通过vmnet1使得主机和虚拟机可以通信 NAT模式下通过vmnet8使得主机和虚拟机可以通信Mac终端cd/Libr…

    2022年4月12日
    137
  • 4.vue 的双向绑定的原理是什么?_Vue双向绑定原理

    4.vue 的双向绑定的原理是什么?_Vue双向绑定原理Vue双向绑定原理及问题剖析,快速搞懂Vue双向绑定~

    2022年10月17日
    2

发表回复

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

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