vue router 结合 element ui 应用时 连续点击跳转路由报错

首先是使用element的布局了几个相同的部分,但每个部分的路由和显示的文字不同,所以 就写了个数组,每个对象的文字,路由都不同,直接使用这个数组进行循环页面,但在项目测试的时候 发现一个问题 就是连续点击一个路由的时候,会报错。

比如 要跳转的路由是 /data,会发现跳转了两次,第一次是正常的页面,但第二次成了这个路径 /data/data,也就是最终呈现给我们的页面路径,因为项目里不存在这个路径 所以就会报错

我就在网上搜了原因,但一开始的结果如下:

1.vue路由版本的问题,不是3.1的版本应该换成3.0的版本,但我在项目里发现目前我们项目里边就是3.0的版本,很奇怪,这个解决方案pass掉

2.说是用这串代码就可以解决

import Router from 'vue-router'
 
// 解决重复点击导航路由报错
const originalPush = Router.prototype.push;
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err);
}

但后来发现 其实这串代码和(1)的解决方法是一样的,用(1)就可以不用(2),两者是解决一种问题的,所以 再次pass掉

3. 我又看了看书写的那几个跳转的路径 发现了问题,也就是路由写成了相对路径

首先解释下相对路径和绝对路径的区别:

绝对路径:由根目录(/)为开始写起的文件名或者目录名称,如 /data
相对路径:相对于当前路径文件名的写法

所以这样一解释 应该明白了吧 也就是要跳转的路由:/data,项目里写成了data,没有加上这个 / (别看我这么不起眼,就是没有老子不行,哈哈哈)

当多次点击路径的时候,第一次跳转路径是/data 但第二次跳转时就是以/data为参照再次跳转/data/data, 这就是为什么 我们开头看到的路径问题。

所以 最终解决方法就是:相对路径变为绝对路径,写路径的时候 一定要记得加 / 哦,不然30秒写出的代码要30分钟就找bug就不划算了