Vue中函数内跳转父路由出现/companies/companies路径拼接错误求助

问题根源 #

$router.push 传入不带开头斜杠的字符串路径时，会按照当前所在路由的路径层级做相对路径拼接。
触发跳转的页面路由为 /companies/:id（实际路径形如 /companies/123），传入跳转参数 'companies' 时，会在当前路径层级下拼接生成 /companies/companies，与实际出现的跳转偏差完全吻合。

可落地的修正方式 #

可根据项目习惯选择任意一种写法，均能正确跳转到目标列表页：

• 使用绝对路径跳转
  在跳转路径前补上开头斜杠，让路由器从根路径开始匹配目标：

  // 原错误写法
  self.$router.push('companies')
  // 修正后的写法
  self.$router.push('/companies')
  

• 使用命名路由跳转（可维护性更高）
  路由配置中已经给列表页定义了路由名Companies，直接通过命名跳转可以完全规避相对路径拼接的问题。后续如果调整列表页的路径配置，也不需要逐处修改跳转代码：

  self.$router.push({ name: 'Companies' })
  

额外避坑提醒 #

如果需要在路由跳转中使用相对路径，可在路径前加上../符号做层级回退，逻辑与终端目录跳转规则一致。但针对当前跳转到固定列表页的需求，不建议使用相对路径写法，很容易因为路由层级调整出现非预期的拼接错误。

内容的提问来源于stack exchange，提问作者user2534723