vue-router 报错:Navigation cancelled from“/…“ to “/…“ with a new navigation.

vue-router 报错:Navigation cancelled from“/…“ to “/…“ with a new navigation.vue-router@3.0版本及以上回调形式已经改成promiseapi的形式了,返回的是一个promise,如果路由地址跳转相同,且没有捕获到错误,控制台始终会出现如图所示的警告(注:3.0以下版本则不会出现以下警告!!!,因路由回调问题…)*怎么解决呢?方案一:安装vue-router3.0以下版本:先卸载3.0以上版本然后再安装旧版本npminstallvue-router@2.8.0-S方案二:针对于路由跳转相同的地址添加catch捕获一下异常:this.$router.

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

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

在这里插入图片描述
vue-router@3.0版本及以上回调形式已经改成promise api的形式了,返回的是一个promise,如果路由地址跳转相同, 且没有捕获到错误,控制台始终会出现如图所示的警告 (注:3.0以下版本则不会出现以下警告!!!,因路由回调问题…)
*

怎么解决呢?

方案一:
安装vue-router3.0以下版本:先卸载3.0以上版本然后再安装旧版本 npm install vue-router@2.8.0 -S

方案二:
针对于路由跳转相同的地址添加catch捕获一下异常:this.$router.push(’/location’).catch(err => { console.log(err) })

方案三:
在main.js下注册一个全局函数即可 (注:此处理方案只针对于vue-router 3.0以上版本哈!!!)

import Router from 'vue-router'

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) { 
   
  return originalPush.call(this, location).catch(err => err)
}

注:官方vue-router@3.0及以上新版本路由默认回调返回的都是promise,原先就版本的路由回调将废弃!!!!


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

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

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


相关推荐

  • 基于近邻的协同过滤算法

    基于近邻的协同过滤算法这节课我们来学习K近邻在推荐系统中的应用,你将完成本课程的第一个实战项目:基于KNN的电影推荐系统!为了使你能够顺利地完成实战内容,我们先了解一下推荐系统中的基础知识。基于近邻用户的协同过滤假定有一个场景:某个周日的下午,你感觉很无聊,然后从电脑上打开了一个视频网站,想看下最近有什么好看的电影。然而你发现网站上的热门电影基本都看过,其他的电影又太多,不知道该看什么。想使用搜索框去查一下,但是又不知道该搜什么关键词,这个时候你的内心很焦灼,总不能挨个去尝试吧,那时间成本也太大了…仔细想想还是有办法的,那

    2022年6月30日
    27
  • java查询数据导出excel并返回给浏览器下载

    java查询数据导出excel并返回给浏览器下载效果图:1.点击导出表按钮2.接着就会出现下图3.点击上图中的确定按钮再接着就会出现下图4.点击上图中的保存按钮接着就会出现下图,浏览器下载完成后的提示5.打开下载好的文件如下图好了,废话不多少,上代码jsp前端代码<divstyle="height:30px;"> <a>时间:</a>…

    2022年6月28日
    24
  • Python 之 cPickle用法

    Python 之 cPickle用法序列化就是通过特殊的方法将数据存储到相应存储区的过程,反序列化就是依据数据序列化时的规则进行反向执行,以取出原数据的过程。在编写程序的过程中,我们有时需要将数据进行序列化与反序列化的操作,本篇博客旨在阐述序列化与反序列化的作用及举例说明几个常用方法的使用。

    2022年6月24日
    29
  • JAVA中json转Map,jsonArray转List集合,List集合转json

    JAVA中json转Map,jsonArray转List集合,List集合转json在写代码时,经常会遇到各转类型之间互相转换,比如json转换为Map,jsonArray转List集合,List集合转json,现在整理一个工具类,方便日后查阅。importjava.util.HashMap;importjava.util.Iterator;importjava.util.List;importjava.util.Map;importorg.apac

    2022年6月23日
    27
  • PDO 用法学习「建议收藏」

    PDO 用法学习「建议收藏」PDO:phpdataobject 数据库访问抽象层 基于驱动: 1、安装扩展php_pdo.dll 2、安装驱动php_pdo_mysql.dlllinux编译时参数:–with-pd

    2022年8月5日
    9
  • 电子元器件品牌及其代理商

    电子元器件品牌及其代理商海思(Hisilicon)在大中华区的授权分销商有:深圳市群方电子、深圳市淇诺实业、晓龙国际、威健实业、中国电子器材、深圳市智宇鹏电子等。 紫光在大中华区的授权分销商包括:Arrow,中豪,力同科技,泰发科电子,普浩国际,Mornsun,国华,厦门建益达,昱博科技,CEACSZ,WPG等。 全志科技在大中华区的授权分销商有:君行科技,蓝欣电子,易新泰科技,方糖电子等。 兆易创新(Giga…

    2022年6月29日
    86

发表回复

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

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