浏览器后退按钮在路由器查询参数更改时无法正常工作

Question

我有一个简单的路由定义：

    {
        path: 'customers',
        name: 'customers',
        component: Customers,
        props: true
    }

首先，我在一般的 /customers 路线上。但是我可以在这条路线上使用查询参数，并对变化做出反应以加载相应的数据：

this.$router.push({ name: 'customers', query: { customerId: '123' } });

@Watch('$route.query.customerId')
customerIdChanged() {
   this.loadCustomer($route.query.customerId);
}

这按预期工作，但假设我将三个不同的 customerId 推送到此路由器，现在想返回浏览器历史记录并一一加载以前的客户。我不能，因为查询更改不被视为“真正的”url 更改。因此，当我向后推时，我会被路由回初始的 /customers 路由。

如何使这些查询更改算作真正的 url 更改，以便我可以使用后退按钮？我可以维护自己的浏览器历史堆栈，但我宁愿不这样做，而且认为有更“官方”的解决方案？

谢谢！

----更新----

实际上我的代码有错误。在我推送到路线之前，我用 /customer 替换了路线。然后推送客户查询路由。这就是后退导航不起作用的原因。

Answer 1

dynamic matching呢？您可以使用：

{
    path: 'customers/:id',
    name: 'customers',
    component: Customers,
    props: true
}

this.$router.push({ name: 'customers', params: { id: '123' } });

Browser back button not working properly on router query param change