vue 控制台错误 NavigationDuplicated

最新推荐文章于 2021-06-07 16:31:04 发布
最新推荐文章于 2021-06-07 16:31:04 发布
阅读量337 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiahuale/article/details/103256461
版权

新下了个vue admin 做了两个菜单，页面切换的时候总报错，上网查了一下原来是 Vue-router在3.1之后把$router.push()方法改为了Promise的，如果没有回调函数，错误信息就会交给全局的路由错误处理，因此就会报上述的错误。

解决方法参考https://www.cnblogs.com/rever/p/11577322.html

我选择方案2，为每个router.push增加回调函数

如下，找到所有的 router.push

更新为 router.push('/location').catch(err => {err})

初级码奴
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
编程式路由跳转到当前路由, 控制台抛出NavigationDuplicated的错误
qq_38763173的博客
04-06 496
编程式路由跳转到当前路由, 控制台抛出NavigationDuplicated的错误 router.push 的语法规则如下： router.push(location（导航路径）, onComplete（成功的回调）?, onAbort?（失败的回调）) router.push(location).then(onComplete).catch(onAbort) router.replace...
vue路由切换时NavigationDuplicated报错的解决方法
xm2by的博客
01-16 1506
vue路由切换时NavigationDuplicated报错的解决方法 在vue中使用this.$router.push()方法切换路由时，有时控制台会报NavigationDuplicated相关的错误，如下图所示： 原因： 在网上查询一番后，比较多的一种说法是，vue-router在3.1之后把$router.push()方法改为了Promise，因此在使用$router.push()时如果...
解决vue在控制台的 NavigationDuplicated 报错
04-21 239
解决vue在控制台的 NavigationDuplicated 报错 复现 vue router 升级到3.1.x 后，重复点击导航时（连续点击相同路由链接）控制台出现报错 {_name: “NavigationDuplicated”, name: “NavigationDuplicated”}，虽然不影响功能使用，但也不能视而不见。 原因 vue router ≥ v3.1 后 ，回调形式改成p...
Vue Router的NavigationDuplicated错误
zoujiawei6的博客
11-17 269
NavigationDuplicated: Avoided redundant navigation to current location: “/”. Error: Redirected when going from “" to "” via a navigation guard. Vue router最近将NavigationDuplicated的错误置顶了，posva的高赞回答提出的解决方案如下： import Router from 'vue-router' const originalPu.
解决 vue-router 报 NavigationDuplicated 错误
wang_xiao_ye的博客
11-29 5966
解决 vue-router 报 NavigationDuplicated 错误 控制台报错： 原因： vue-router 在3.1版本以后将 $router.push()、 $router.replace() 方法改为了 Promise，假如没有回调函数，错误信息就会交给全局的路由错误处理。如截图：Uncaught (in promise) 方案1： 降版 npm i vue-router@3...
Vue-router 报NavigationDuplicated的可能解决方案
Mm_Dxx的博客
04-16 269
今天在做tabbar的时候，遇到一个问题，页面虽然能够成功跳转，但是控制台报了一个Uncaught (in promise)的错误，多次点击时报错[NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}]。查了资料，发现原因是在于Vue-router在3.1之后把$router.push(...
NavigationDuplicated控制台报错
qq_36893984的博客
10-11 606
NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "Navigating to current location ("/users") is not allowed", stack: "Error↵ at new NavigationDuplicated (w...
解决vue-router报错NavigationDuplicated: Avoided redundant navigation to current location:
wyz_memory的博客
06-07 831
问题说明：vue-router使用过程中，重复触发了同一个路由，导致控制台报错：避免到当前位置的冗余导航；（该错误不影响正常功能） 解决思路：重写原型对象中的push方法，捕捉错误 // 获取原型对象上的push函数 const originalPush = Router.prototype.push // 修改原型对象中的push方法，捕捉错误 Router.prototype.push = function push(location) { return originalPush.call(th
Vue-router报NavigationDuplicated的产生原因和解决方案
dachuichaobang的博客
04-15 537
当你的Vue项目在当前的路由下企图再次导航到当前路由时就会出现NavigationDuplicated的问题（通俗来讲就是多次进入了同一个path，比如说当前你在/user/user-list页面，这时候你通过点击按钮或其他的方式又进入了/user/user-list页面，那就会抛出下面的问题） 这个问题是vue-router3.0版本往上才出现的问题，目前的vue-router@3.1.1 版本官方已经修复了此问题。NavigationDuplicated 产生的时候会抛出一个promise,在3.0版
Vue-router 报错NavigationDuplicated的解决方法
10-15
主要介绍了Vue-router 报错NavigationDuplicated的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue中错误图片的处理的实现代码
10-16
主要介绍了Vue中错误图片的处理的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue项目前端错误收集之sentry教程详解
10-16
错误信息通常不会显示在浏览器控制台，而是通过网络请求发送到 Sentry。你可以检查 Network 面板查看 Sentry 的错误上报请求。 在 Sentry 后台，你可以查看捕获的错误信息，但原始的错误信息可能经过压缩，无法直接...
vue 项目build错误异常的解决方法
10-17
主要介绍了vue build错误异常的解决方法 ，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue获取元素位置 getBoundingClientRect is not a function
热门推荐
小划乐的博客
02-21 1万+
点击input获取该元素位置 一开始使用 ref 获取dom元素，然后调用getBoundingClientRect()方法 <div @click="getInput" > <Input type="text" readonly="readonly" ref="inputDom"></Input> </div&
vue格式化日期方法
小划乐的博客
02-15 9992
调用举例 this.formatter('Fri Feb 01 2019 00:00:00 GMT+0800', 'yyyy-MM-dd hh:mm:ss') 方法 methods: { formatter (thistime, fmt) { let $this = new Date(thistime) let o = { 'M+'...
iview的Select组件filterable
小划乐的博客
04-01 6741
<FormItem label="国家"> <Select v-model="country" ref="sel" filterable> <Option v-for="item of countryList" :value="item.name" :key="item.id" > {{item.name}} </Op...
Vue入门(搭建环境、创建运行项目)
小划乐的博客
12-06 2973
Vue 是一个前端框架，特点是 数据绑定：比如你改变一个输入框 Input 标签的值，会自动同步更新到页面上其他绑定该输入框的组件的值； 组件化：页面上小到一个按钮都可以是一个单独的文件.vue，这些小组件直接可以像乐高积木一样通过互相引用而组装起来 一、编辑器选用vscode，下载并安装 下载地址：https://code.visualstudio.com/ 说明：VS Code（V...
iview-admin nginx 部署子目录
小划乐的博客
01-18 2637
例如访问url为 http://www.myapp.com/my-app/ 1、修改项目下的 vue.config.js 部署环境改为子目录的名称 2、nginx配置 这里使用alias ，不能用root server { listen 8080; server_name www.myapp.com; location /my-ap...
vue控制台创建项目
最新发布
09-01
要在控制台中使用Vue.js创建项目，你需要先确保你的电脑上已经安装了Node.js。安装完成后，按照以下步骤创建Vue项目： 1. 打开控制台，并进入你想要创建项目的文件夹。 2. 运行以下命令安装Vue CLI（命令行界面）：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值