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就不划算了