CODEWITHSUNDEEP
vue.jsvue-router
Farsen
Farsen

Reputation: 1677

Browser back button not working properly on router query param change

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!

---- UPDATE ----

I actually had an error in my code. Before i pushed to the route, i replaced the route with /customer. And then pushed the customer query route. This was why the back navigation did not work.

Upvotes: 1

Views: 3090

Answers (1)

Lazza
Lazza

Reputation: 101

What about dynamic matching? You could use:

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

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

Upvotes: 1

Related Questions