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


相关推荐

  • js字符串拼接的几种方式是_js字符串常用方法

    js字符串拼接的几种方式是_js字符串常用方法在JavaScript中,使用字符串连接有几种方式:连接符(+)、反引号(`)、join()、concat()。

    2022年10月24日
    0
  • 优化算法——人工蜂群算法(ABC)

    优化算法——人工蜂群算法(ABC)一、人工蜂群算法的介绍人工蜂群算法(ArtificialBeeColony,ABC)是由Karaboga于2005年提出的一种新颖的基于群智能的全局优化算法,其直观背景来源于蜂群的采蜜行为,蜜蜂根据各自的分工进行不同的活动,并实现蜂群信息的共享和交流,从而找到问题的最优解。人工蜂群算法属于群智能算法的一种。二、人工蜂群算法的原理1、原理标准的ABC算法通过模拟

    2022年5月23日
    241
  • web.xml中contextConfigLocation的作用

    web.xml中contextConfigLocation的作用在web.xml中通过contextConfigLocation配置spring,contextConfigLocation参数定义了要装入的Spring配置文件。1.在web.xml里配置需要加载的spring配置文件。  如果要装入多个配置文件,在<param-value>标记中用逗号作分隔符即可。<context-param>…

    2022年6月16日
    35
  • Git高阶实战技巧(4)

    Git高阶实战技巧(4)

    2021年5月24日
    101
  • cstring头文件是什么_class可以作为标识符吗

    cstring头文件是什么_class可以作为标识符吗关于在VC++中对CString进行引用时,需要按使用情况添加不同的头文件(1)atlstr.h——————————-非MFC工程中.(2)afx.h———————————-MFC工程中.

    2022年9月13日
    0
  • FFmpeg从入门到精通读书笔记(1)

    FFmpeg从入门到精通读书笔记(1)笔者才开始学习音视频开发,FFmpeg从入门到精通读书笔记系列主要是基于阅读刘歧、赵文杰编著的《FFmpeg从入门到精通》以及雷霄骅博士博客总结写的入门心得体会。官方文档资料FFmpeg官方文档:https://ffmpeg.org/documentation.htmlFFmpeg官方wiki:http://trac.ffmpeg.org/wiki中文经典资料雷霄骅博士csdn链…

    2022年6月26日
    20

发表回复

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

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