addroute添加动态路由时踩的坑

添加一条新的路由规则记录作为现有路由的子路由。如果该路由规则有 name，并且已经存在一个与之相同的名字，则会覆盖它。

name相同时会覆盖原有路由。这是vue官网原话
那么path相同时呢

先说结论：

router.addroute在添加路由时，已有的路由规则表中如果含有path相同的路由时，则不会添加进路由规则表中，并且如果当前路由能匹配到path值name却不同时，会自动跳转当前路由到匹配的路由。

起因是这样的。最近由于项目需求，要在顶部菜单里加一个能添加动态路由的按钮，打开新标签的函数是写在全局路由守卫里的，通过路由的name跳转。

路由配置

let routerData={
  path: 'callInfo/callInfo/:id',
  title: '来电信息'+id,
  name: 'callInfo'+id,
  component: () => import('@/views/callInfo/callInfo.vue'),
}
let params={id:id,activeTag:true,phone:this.callphone}

结果写好逻辑后测试时发现，在关闭动态路由标签1后，在标签2界面新添加动态路由时，把最初关闭的标签1也给打开了.

？？？？咋还会有这么奇奇怪怪的bug

在多次查找未果后，我丧心病狂把所有与路由跳转关联的代码前后全加了句console，终于发现了端倪

console.log('动态添加主界面Main组件路由')
router.addRoute('otherRouter',routes)
console.log('路由列表',router.getRoutes(),routes)

输出结果是这样的：

瞧瞧我发现了啥，里面竟然蹦出两个钩子函数，也就说在addroute添加路由时会刷新路由信息，执行跳转操作，还是从2跳到1。神奇！

之后我又测试在route.js里配置的路由界面打开动态路由时它并没有跳转

那咋回事？
于是我通过getRoutes把路由规则表输出一看。好家伙，压根没添加进去
此时我发现里面有个属性有点惹眼，regex，用的还是正则表达式！！！

结合之前的发现，于是乎我有了个大胆的猜测，是不是在每次addroute添加路由时，通过这个正则表达式匹配path值，如果是对上眼了，就不添加进路由规则表中。正是因为路由规则表中没有2和3，两个都是黑户，所以在标签2新增动态路由时，把自己也搭进去了。

路由规则表根据路由配置表去匹配时，发现path对了，name却是2，不是1，自动更新信息跳转到name1的界面，触发路由跳转，结果在路由全局守卫after中碰上打开新标签的函数（通过路由名跳转），所以把标签1给打开了…也就说这个不断诈尸的标签就是最初加进路由规则里的那个

确定了问题，那就好办了，把path改成不重复的就OK，

//原版
let routerData={
  path: 'callInfo/callInfo/:id',
  title: '来电信息'+id,
  name: 'callInfo'+id,
  component: () => import('@/views/callInfo/callInfo.vue'),
}
//新版
let routerData={
  path: 'callInfo/callInfo/'+id,
  title: '来电信息'+id,
  name: 'callInfo'+id,
  component: () => import('@/views/callInfo/callInfo.vue'),
}

测试结果，成功
这个着实坑，留个记录