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的核心深度集成 ...
随机推荐
- 构建之法——beta版本
一.开头☀️ 这个作业属于哪个课程 课程链接 这个作业要求在哪里 要求链接 团队名称 Running Man 这个作业的目标 完成团队的Beta版本项目 二.时间任务安排☀️ 时间安排: 冲刺总时间为 ...
- JS数组扁平化(flat)
需求:多维数组=>一维数组 let ary = [1, [2, [3, [4, 5]]], 6]; let str = JSON.stringify(ary); 第0种处理:直接的调用 arr_ ...
- 微信支付之获取openid
一.准备工具 不管开发什么,官方的文档应该是第一个想到的这里把官方文档贴出来:微信网页授权文档除此之外,我们还需要一个内网穿透的工具在开发环境下让微信能访问到我们的域名.我使用的是natapp.此类工 ...
- 检测并修改linux服务器日期
公司的一个应用服务器license到期了,商务上短时间解决不了.只好将服务器的时间调到去年,临时将就一下. 服务器是vmware虚拟机装的centos,日期每隔一段时间会自动同步,百度了好久,也关闭不 ...
- centos7部署inotify与rsync实现实时数据同步
实验环境:CentOS Linux release 7.6.1810 node1:192.168.216.130 客户端(向服务端发起数据同步) node2:192.168.216.132 服务端(接 ...
- java构建简单的HTTP服务器
使用Java技术构建Web应用时, 我们通常离不开tomcat和jetty之类的servlet容器,这些Web服务器功能强大,性能强劲,深受欢迎,是运行大型Web应用的必备神器. 虽然Java的设计初 ...
- Python萌新笔记
Mychael上了大学,对Python产生了浓厚的兴趣,便开始了Python的学习 学习的时候,感觉Python确实比以往学的C++表达简洁很多,而又不失强大 以后的学习笔记就记在这啦 变量 Pyth ...
- 解决:一个项目中写多个包含main函数的源文件并分别调试运行
自己在学c++的时候,一个项目中的多个cpp文件默认不允许多个main函数的出现,但是通过选项操作能够指定单个cpp文件进行运行,如下: 1.此时我就想运行第二个cpp文件,我们只需要把其他的两个右键 ...
- BZOJ 5287: [Hnoi2018]毒瘤 动态dp(LCT+矩阵乘法)
自己 yy 了一个动态 dp 做法,应该是全网唯一用 LCT 写的. code: #include <bits/stdc++.h> #define ll long long #define ...
- sphinx doc 文档生成脚手架工具
sphinx 在python 语言开发中,是一个使用的比较多文档生成脚手架工具,我们帮助我们生成 专业的帮助文档,同时也有远端的免费saas 托管服务,方便分发 安装 sphinx 的安装好多方便,m ...