Vue 3 router addroute no match f

问题背景

在Vue 3，当我在后端添加一个新的动态路由时，会报no match found for location with path 这样的错误，前端也跳转到404页面去了。

image.png

明明增加了路由地址，如下，根路由为/eam，但这个 http://localhost/eam/list 路经就是报404

image.png

原因分析

查看Vue 3 router部分的说明文档
https://router.vuejs.org/guide/advanced/dynamic-routing#Adding-routes

image.png
你会发现当 name 名相同时，后面的路由会覆盖前端的路由。

后端返回的二级跌幅地址 list 对应的路由名也是 list，后面（其他二级路径）有相同的路由地址，导致被覆盖而找不到。

问题解决

解决这个问题有两个思路，一个思路是修改这个二级路由地址 list 为别的。另一个思路是对后端返回的路由列表做修改，使得 name保持唯一。我采用第二种思路，因为二级目录很可能重复。

代码如下：

function keepNameUniq(menuArr) {
  if (!Array.isArray(menuArr) || menuArr.length == 0) {
    return;
  }
  const map = {}
  iterItem(map, menuArr)

  for (const [key, value] of Object.entries(map)) {
    if (value.length > 1) {
      for (let i = 0; i < value.length; i++) {
        value[i].name = value[i].name + '' + i
      }
    }
  }
}

function iterItem(map, menuArr) {
  menuArr.forEach(item => {
    if (item.name && item.name.length > 0) {
      if (map[item.name]) {
        const arr = map[item.name];
        arr.push(item)
      } else {
        map[item.name] = [item]
      }
    }

    if (item.children && item.children.length > 0) {
      iterItem(map, item.children)
    }
  })
}

调用处如下：

image.png