Vue Router修改query参数时浏览器返回按钮异常如何解决

问题根因与解决方案 #

Vue Router 中同路由下调用 $router.push() 变更 query 参数时，默认就会向浏览器历史栈新增独立条目，query 变更本身就会被识别为合法的 URL 变更，原生支持浏览器前进后退操作。
你遇到的点击返回直接跳回初始 /customers 路由的问题，和你排查到的前置 replace 操作完全吻合：

• 每次 push 携带新 customerId 的路由前，你先调用了 $router.replace({name: 'customers'} 清空了当前路由的 query 参数，该操作会替换当前的历史栈条目而非新增条目
• 后续执行 push 新增带参路由时，相当于每次都仅在初始无参数的 /customers 路由基础上新增一条记录，多次操作后历史栈只会保留「初始无参数路由 + 最后一次push的带参路由」两条记录，点击返回自然直接跳回初始页

修正方案

移除每次 push 前的 replace 操作即可，直接调用 push 就能生成连续的历史记录：

// 无需提前replace清空query，直接push即可生成独立历史记录
this.$router.push({ name: 'customers', query: { customerId: '123' } });

修改后多次 push 不同 customerId，浏览器历史栈会依次生成 /customers?customerId=1、/customers?customerId=2、/customers?customerId=3 等多条独立记录，点击返回会逐个回退，配合你已实现的 $route.query.customerId 监听器即可正常加载对应客户数据。

可选优化建议

你的路由配置已经开启了 props: true，可以将 query 参数映射为组件 props，避免直接耦合 $route，代码可维护性更强：

// 调整路由props配置，把query参数映射为组件props
{
    path: 'customers',
    name: 'customers',
    component: Customers,
    props: route => ({ customerId: route.query.customerId })
}

// Customers组件内直接监听props即可
props: {
  customerId: String
},
@Watch('customerId')
customerIdChanged(newVal) {
   this.loadCustomer(newVal);
}

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