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


相关推荐

  • request.getParameterValues与request.getParameter的区别

    request.getParameterValues与request.getParameter的区别一、简单的对比request.getParameter用的比较多,相对熟悉  request.getParameterValues(String  name)是获得如checkbox类(名字相同,但值有多个)的数据。  接收数组变量,如checkobx类型    request.getParameter(String  name)是获得相应名的数据,

    2022年7月22日
    7
  • Golang语言快速上手到综合实战笔记(Go语言、Beego框架、高并发聊天室、爬虫)

    Golang语言快速上手到综合实战笔记(Go语言、Beego框架、高并发聊天室、爬虫)

    2022年2月19日
    45
  • Winform控件开发(1)——Label(史上最全)

    Winform控件开发(1)——Label(史上最全)作用:一般用于显示文本或者作为”按钮使用”,当作为显示文本使用时,通过设置label的Text属性实现,当作为“按钮使用时”,在lable的单击事件下注册事件即可,下面详细介绍label的属性:1、Name属性,该属性代表label类对象的名称,通过该属性可以获取到该label对象,如下图:该label对象名称为label1,当然也可以更改为其他名称2、AllowDrop属性,该属性的值是…

    2022年7月26日
    33
  • python怎么保留四位小数_jq四舍五入取小数点后两位

    python怎么保留四位小数_jq四舍五入取小数点后两位在很多场景的计算中,最终得到的数值例如123.45678,要截取2位小数得到123.45,而不是默认的四舍五入方法得到123.46,如何实现呢?一.小数点后取2位(四舍五入)的方法方法一:round()函数方法二:’%.2f’%f方法方法三:Decimal()函数二.小数点后取2位(四舍五不入)的方法方法一:一.小数点后取2位(四舍五入…

    2022年8月12日
    8
  • Android布局Layout中的一些属性

    Android布局Layout中的一些属性

    2021年9月30日
    48
  • Android手机的像素密度(dpi)计算

    Android手机的像素密度(dpi)计算(1)分辨率。分辨率就是手机屏幕的像素点数,一般描述成屏幕的“宽×高”,安卓手机屏幕常见的分辨率有480×800、720×1280、1080×1920等。720×1280表示此屏幕在宽度方向有720个像素,在高度方向有1280个像素。(2)屏幕大小。屏幕大小是手机对角线的物理尺寸,以英寸(inch)为单位。比如某某手机为“5寸大屏手机”,就是指对角线的尺寸,5寸×2.54厘米/寸=12.7厘米。…

    2022年5月29日
    45

发表回复

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

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