Browser back button not working properly on router query param change-CodePudding

I have a simple route definition:

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

To start with, I am on the general /customers route. But I can use query params on this route, and react on changes to load the corresponding data:

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



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

This works as intended, but let´s say i push three different customerId´s to this router, and now want to go back in browser history and load the previous customers one by one. I can´t because a query change is not considered a "real" url change. So when I push back, I get routed back to the initial /customers route.

How to make these query changes count as real url changes so I can use the back button? I could maintain my own browser history stack, but I would rather not, and think there is a more "official" solution?

Thanks!

CodePudding user response：

What about dynamic matching? You could use:

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

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