vue路由中 Navigating to current location ("/router") is not allowed
报错原因:多次点击同一路由,导致路由被多次添加
解决方法:
router/index中添加以下代码:
//router/index.js
Vue.use(VueRouter) //导入vue路由
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (to) {
return VueRouterPush.call(this, to).catch(err => err)
}
之后就不会再报路由错误了
参考自:https://www.jianshu.com/p/a140ad42ef00
以上。
vue路由中 Navigating to current location ("/router") is not allowed的更多相关文章
- 解决vue项目路由出现message: "Navigating to current location (XXX) is not allowed"的问题(点击多次跳转)
如果网页跳转用的方法传参去跳转: (点击多次链接会出现错误) <a class="" href="javascript:void(0);" @click= ...
- vue-routerV3.1版本报错:message: "Navigating to current location ("/home") is not allowed",
出现这个错误的原因是,在路由跳转的时候两次push的path地址相同 解决方法两种: 1.切换版本回3.0版本 2.在你引了vue-router的js文件里加上如下代码即可 import VueRou ...
- Vue Avoided redundant navigation to current location Error
这个报错的根源就是vue-router组件,错误内容翻译一下是: Avoided redundant navigation to current location === 避免冗余导航到当前位置 这个 ...
- vue路由中的 Meta
在项目中肯定有这样的需求,那就是在某个页面的时候,顶部展示 现在当前的页面路径,如下图: 这个在vue中其实很好实现. 首先出现这个肯定是相对应不同的页面,也就是说对应不同的路由,我们在定义路由的时候 ...
- 如何去掉vue路由中的#
通过脚手架vue-cli构建的项目,在项目启动后,URL地址上都会带有#,如:http://localhost:8080/#/father 原因:这是因为vue-router 默认hash模式, 使用 ...
- Navigating to current location ("/") is not allowed
main.js import Router from 'vue-router' // 这个是为了避免一个报错 const originalPush = Router.prototype.push; R ...
- vue路由中使用keep-alive 以及activated和deactivated 钩子
本次只是记录下开发中碰到的问题. 最近做一个活动页面,涉及到角色和权限的问题,需要跳转很多页面,于是vue-router走起,顺便keep-alive也用起来了,嗯,跳转的很爽,但是一个详情页面组件, ...
- 解决vue路由history模式刷新后404的问题
server { listen ;#默认端口是80,如果端口没被占用可以不用修改 server_name localhost; root E:/vue/my_project/dist;#vue项目的打 ...
- vue路由history模式刷新页面出现404问题
vue hash模式下,URL中存在'#',用'history'模式就能解决这个问题.但是history模式会出现刷新页面后,页面出现404.解决的办法是用nginx配置一下.在nginx的配置文件中 ...
随机推荐
- display:flex 简单记录
1.有写了 display:flex:这个就是 采用了 flex布局的 元素 这个元素可以 写 6个属性: flex-direction : row | column | row-reverse ...
- OpenCV-Python ORB(面向快速和旋转的BRIEF) | 四十三
目标 在本章中,我们将了解ORB的基础知识 理论 作为OpenCV的狂热者,关于ORB的最重要的事情是它来自" OpenCV Labs".该算法由Ethan Rublee,Vinc ...
- 学习Angular1
教程: 参考教程: https://www.runoob.com/angularjs/angularjs-tutorial.html 一.angular的简介AngularJS 是一个 JavaScr ...
- 基于zookeeper实现分布式锁和基于redis实现分布所的区别
1,实现方式不同 zookeeper实现分布式锁:通过创建一个临时节点,创建的成功节点的服务则抢占到分布式锁,可做业务逻辑.当业务逻辑完成,连接中断,节点消失,继续下一轮的锁的抢占. redis实现分 ...
- iOS 缩小 ipa 大小
一.爱奇艺 爱奇艺移动应用优化之路:如何让崩溃率小于千分之二 iOS8 对于 App 的 text 段有 60MB 的限制: 超过 200MB 的 App 需要连接 WIFI 下载(之前是 150MB ...
- 16.如何查找所需的maven的依赖
http://mvnrepository.com/ 1.先打开上面的网址 搜索需要的依赖,点进去 2.选择需要的版本 3.红框中的就是依赖的地址 此外也有其他自动化构建工具所需要的地址
- Shell 命令 之linux 模式下的编程语言
今天简单介绍一下shell 命令的使用,希望对大家有所帮助!!! 一. 1.首先创建一个文本 在终端 touch test.sh 用gedit test.sh 打开.sh 文件 输入如下,第一行是申明 ...
- Java String与char
1. char类型 + char 类型 = 字符对应的ASCII码值相加(数字): char类型 + String 类型 = 字符对应的ASCII码值相加(数字) + String 类型: Strin ...
- Pytest系列(7) - skip、skipif跳过用例
如果你还想从头学起Pytest,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1690628.html 前言 pytest.mark.sk ...
- 在vue项目中使用md5加密 sirai
1.安装模块 npm install js-md5 -D 2.在项目中引入模块 import md5 from 'js-md5' 3.把你需要加密的信息进行前期处理 CalcuMD5 = functi ...