报错原因:多次点击同一路由,导致路由被多次添加

解决方法:

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的更多相关文章

  1. 解决vue项目路由出现message: "Navigating to current location (XXX) is not allowed"的问题(点击多次跳转)

    如果网页跳转用的方法传参去跳转: (点击多次链接会出现错误) <a class="" href="javascript:void(0);" @click= ...

  2. vue-routerV3.1版本报错:message: "Navigating to current location ("/home") is not allowed",

    出现这个错误的原因是,在路由跳转的时候两次push的path地址相同 解决方法两种: 1.切换版本回3.0版本 2.在你引了vue-router的js文件里加上如下代码即可 import VueRou ...

  3. Vue Avoided redundant navigation to current location Error

    这个报错的根源就是vue-router组件,错误内容翻译一下是: Avoided redundant navigation to current location === 避免冗余导航到当前位置 这个 ...

  4. vue路由中的 Meta

    在项目中肯定有这样的需求,那就是在某个页面的时候,顶部展示 现在当前的页面路径,如下图: 这个在vue中其实很好实现. 首先出现这个肯定是相对应不同的页面,也就是说对应不同的路由,我们在定义路由的时候 ...

  5. 如何去掉vue路由中的#

    通过脚手架vue-cli构建的项目,在项目启动后,URL地址上都会带有#,如:http://localhost:8080/#/father 原因:这是因为vue-router 默认hash模式, 使用 ...

  6. Navigating to current location ("/") is not allowed

    main.js import Router from 'vue-router' // 这个是为了避免一个报错 const originalPush = Router.prototype.push; R ...

  7. vue路由中使用keep-alive 以及activated和deactivated 钩子

    本次只是记录下开发中碰到的问题. 最近做一个活动页面,涉及到角色和权限的问题,需要跳转很多页面,于是vue-router走起,顺便keep-alive也用起来了,嗯,跳转的很爽,但是一个详情页面组件, ...

  8. 解决vue路由history模式刷新后404的问题

    server { listen ;#默认端口是80,如果端口没被占用可以不用修改 server_name localhost; root E:/vue/my_project/dist;#vue项目的打 ...

  9. vue路由history模式刷新页面出现404问题

    vue hash模式下,URL中存在'#',用'history'模式就能解决这个问题.但是history模式会出现刷新页面后,页面出现404.解决的办法是用nginx配置一下.在nginx的配置文件中 ...

随机推荐

  1. thinkphp5.1中使用链式操作的坑

    1.在进行tp5->tp5.1的时候,没有想太多,直接使用之前的代码:结果在该操作中,多次调用该get方法,tp5.1的链式操作一直保持了之前的搜索条件,截图如下:(具体的代码没有展示) 2.然 ...

  2. [WPF]是时候将WPF控件库从.Net Framework升级到.NET Core 3.1

    1. 升级到Core的好处 去年中我曾考虑将我的控件库项目Kino.Toolkit.Wpf升级到.NET Core,不过很快放弃了,因为当时.NET Core是预览版,编译WPF还需要使用最新的Vis ...

  3. 并查集 & 最小生成树详细讲解

    并查集 & 最小生成树 并查集 Disjoint Sets 什么是并查集?     并查集,在一些有N个元素的集合应用问题中,我们通常是在开始时让每个元素构成一个单元素的集合,然后按一定顺序将 ...

  4. 为什么Swift和Python要抛弃++\--?

    简单好用的++.-- 说到自增(++)\自减(--)运算符,小伙伴们应该都不会陌生,在很多编程语言的代码中,都经常出现它们的身影. 比如常用的for语句 for (int i = 0; i < ...

  5. ARM.SchDoc图解

    1.基准电压.CR1220电池 2.LCD 3.SPI 4.外部SAM 5.实时时钟 6.EEPROM 7.JTAG 8.复位

  6. Vue里面提供的三大类钩子及两种函数

    在路由跳转的时候,我们需要一些权限判断或者其他操作.这个时候就需要使用路由的钩子函数. 定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数. 总体来讲vue里面提供了三大类钩子 ...

  7. css中(单冒号):after和(双冒号)::after的区别

    :after是伪元素 .::after是伪类 什么是伪类? CSS伪类是添加到选择器的关键字,指定要选择的元素的特殊状态.例如,:hover可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色. ::af ...

  8. JMeter 接口测试 自动生成签名机制

    在进行接口测试时,遇到接口进行了签名校验,为实现自动生成签名,经过一点研究终于成功. 首先,需要从前端获取 签名加密包  XXXsign.jar..  建议将该jar包放在 jmeter lib 目录 ...

  9. MyBatis(八):高级结果映射

    本文是按照狂神说的教学视频学习的笔记,强力推荐,教学深入浅出一遍就懂!b站搜索狂神说或点击下面链接 https://space.bilibili.com/95256449?spm_id_from=33 ...

  10. 7L-双线链表实现

    链表是基本的数据结构,尤其双向链表在应用中最为常见,LinkedList 就实现了双向链表.今天我们一起手写一个双向链表. 文中涉及的代码可访问 GitHub:https://github.com/U ...