如何在Vue Router中修改基础URL？解决路由路径跳转异常

你遇到的问题是因为直接在path中拼接查询参数，导致Vue Router解析路径时出错，生成了相对路径而非预期的绝对路径。正确的做法是将路径和查询参数分开配置，利用Vue Router的query字段传递参数，同时确保path为绝对路径（以/开头）。

正确代码示例 #

使用push跳转路由：

this.$router.push({
  path: '/lang/compare',
  query: {
    c: 1,
    back: 1,
    query: [94, 911] // 同名多参数用数组传递，Vue Router会自动解析为&query=94&query=911
  }
});

使用replace替换当前路由：

this.$router.replace({
  path: '/lang/compare',
  query: {
    c: 1,
    back: 1,
    query: [94, 911]
  }
});

关键说明 #

• 以/开头的绝对路径会直接从根域名下拼接，不会基于当前路径生成嵌套的相对路径，避免出现/lang/countries/states/cities/lang/compare/这类错误路径。
• 通过query字段传递参数，Vue Router会自动处理参数拼接逻辑，同时保留Vue组件的状态，完全符合你不能用window.location.href的需求。

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