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


相关推荐

  • pycharm database 没有_pycharm社区版使用教程

    pycharm database 没有_pycharm社区版使用教程网上教程都是直接打开右上角的database,但是我死活也没找到,后来发现应该是因为社区版的问题,需要自己安装,详细步骤如下图。1.打开File—》Settings—-》Plugins搜索database,选择DatabaseNavigator安装即可done~

    2022年8月29日
    2
  • Python2.3-原理之语句和语法

    Python2.3-原理之语句和语法

    2021年9月7日
    56
  • docker(3)快速搭建centos7-python3.6环境[通俗易懂]

    docker(3)快速搭建centos7-python3.6环境[通俗易懂]前言当我们在一台电脑上搭建了python3.6的环境,下次换台电脑,又得重新搭建一次,设置环境变量等操作。好不容易安装好,一会提示pip不是内部或外部命令,一会又提示pip:commandno

    2022年7月30日
    10
  • 1、java语言概述

    1、java语言概述文章目录Java基础知识图解软件开发软件开发人机交互方式命令行常用的DOS命令常用快捷键java语言java版本历史迭代Java技术体系平台Java在各领域的应用Java语言运行机制及运行过程Java语言的特点跨平台性Java两种核心机制核心机制—Java虚拟机核心机制—垃圾回收Java语言的环境搭建什么是JDK,JRE下载并安装JDK配置环境变量开发HelloWorld开发HelloWorld注意:注释(Comment)文档注释Java基础知识图解软件开发软件开发软件,即一系列按照特定顺序组织的

    2022年7月7日
    25
  • listagg()行转列函数[通俗易懂]

    listagg()行转列函数[通俗易懂]–基础数据DROPTABLE"ZYH_TEST";CREATETABLE"ZYH_TEST"("ID"NUMBER(19)NOTNULL,"NAME"VARCHAR2(255BYTE),"CREATETIME"DATE,"SCORE"NUMBER,"CLASSID"VARCHAR2(255BYTE)

    2025年9月26日
    3
  • Layui弹出层 加载 做编辑页面「建议收藏」

    Layui弹出层 加载 做编辑页面「建议收藏」先上效果图基本准备,引入layui的layui.css,layui.js文件<linkrel="stylesheet"href="../../../Publics/others/layui/css/layui.css"media="all"><scriptsrc="../../../Publics/others/layui/layui.js">&a

    2022年5月26日
    70

发表回复

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

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