vue -- router路由跳转错误 , NavigationDuplicated
vue-router ≥3.0版本回调形式以及改成promise api的形式了,返回的是一个promise,如果路由地址跳转相同, 且没有捕获到错误,控制台始终会出现如图所示的警告 (注:3.0以下版本则不会出现以下警告!!!,因路由回调问题…)
方案一:
安装vue-router3.0以下版本:先卸载3.0以上版本然后再安装旧版本 npm install @vue-router2.8.0 -S
方案二:
针对于路由跳转相同的地址添加catch捕获一下异常:this.$router.push('/location').catch(err => { console.log(err) })
方案三:
在main.js下注册一个全局函数即可
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新版本路由默认回调返回的都是promise,原先就版本的路由回调将废弃!!!!
————————————————
原文链接:https://blog.csdn.net/weixin_45522694/article/details/99548714
vue -- router路由跳转错误 , NavigationDuplicated的更多相关文章
- vue router路由跳转了,但是页面没有变(已解决)
小白学习 router.js:两个组件之间跳转 但是路由变了,页面没有改变的原因是因为app.vue里面没有router-view(很关键)
- Vue.之.路由跳转
Vue.之.路由跳转 在进行项目开发的过程中,需要使用路由进行跳转.如下: // 不带有参数,在页面上跳转到别的页面 1. this.$router.push('/login/init'); // ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转
问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...
- Vue系列:Vue Router 路由梳理
Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...
- Vue之路由跳转 传参 aixos 和cookie
一.路由跳转 1.1 项目的初始化 vue create m-proj >>>创建vue项目 精简vue项目的 views 视图 About(基本是删除的) Home.(可以 ...
- vue设置路由跳转参数,以及接收参数
最近做Vue项目,遇到了一个路由跳转问题:首页要跳转到项目页指定的Tab选项卡项,一开始总是跳到默认项.解决方法如下: 在跳转链接处设置了路由跳转参数,如下: <router-link :to ...
- vue二级路由跳转后外部引入js失效问题解决方案
vue路由可以通过children嵌套,于是可以形成二级路由等等... 案例如下: routes: [ { path: '/', name: 'dy', component: dy, children ...
- 04 Vue Router路由管理器
路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...
随机推荐
- HDU4814——数学,模拟进制转换
本题围绕:数学公式模拟进制转换 HDU4814 Golden Radio Base 题目描述 将一个十进制的非负整数转换成E(黄金分割数)进制的数 输入 不大于10^9的非负整数,处理到文件尾 输出 ...
- Electrification Plan 最小生成树(prim+krusl+堆优化prim)
题目 题意: 无向图,给n个城市,n*n条边,每条边都有一个权值 代表修路的代价,其中有k个点有发电站,给出这k个点的编号,要每一个城市都连到发电站,问最小的修路代价. 思路: prim:把发电站之间 ...
- 微服务:springboot与swagger2的集成
现在测试都提倡自动化测试,那我们作为后台的开发人员,也得进步下啊,以前用postman来测试后台接口,那个麻烦啊,一个字母输错就导致测试失败,现在swagger的出现可谓是拯救了这些开发人员,便捷之处 ...
- Alpha冲刺(10/10)——2019.5.3
所属课程 软件工程1916|W(福州大学) 作业要求 Alpha冲刺(10/10)--2019.5.3 团队名称 待就业六人组 1.团队信息 团队名称:待就业六人组 团队描述:同舟共济扬帆起,乘风破浪 ...
- djiango-异步发送邮件--celery
安装 pip install celery==4.2.0 # celery4.x支持django1.11以上版本 试了好几个版本 就4.2.0能发送成功 1.项目目录里新建一个celery的包cele ...
- 解决:一个项目中写多个包含main函数的源文件并分别调试运行
自己在学c++的时候,一个项目中的多个cpp文件默认不允许多个main函数的出现,但是通过选项操作能够指定单个cpp文件进行运行,如下: 1.此时我就想运行第二个cpp文件,我们只需要把其他的两个右键 ...
- LeetCode 1000. Minimum Cost to Merge Stones
原题链接在这里:https://leetcode.com/problems/minimum-cost-to-merge-stones/ 题目: There are N piles of stones ...
- CentOS7中使用yum安装nginx和php7.2的方法
c 1.安装源 安装php72w,是需要配置额外的yum源地址的,否则会报错不能找到相关软件包. php高版本的yum源地址,有两部分,其中一部分是epel-release,另外一部分来自webtat ...
- Oracle 分区默认segment大小变化(64k—>8M)
原文链接:http://www.cnblogs.com/wcwen1990/p/6656545.html _partition_large_extents和_index_partition_large ...
- 关于System.BadImageFormatException
什么是BadImageFormatException BadImageFormatException是当动态链接库 (DLL) 或可执行程序的文件映像无效时引发的异常. 可能的原因 如果动态链接库 ( ...