How to make history.replaceState work with Nuxt?
So we are using Nuxt (2.15) together with Algolia and their Instantsearch. And there is a problem with how the router works.
On pages where we have Instantsearch, the routing related to search parameters is handled via this library. So when we apply for example filter or pagination it updates the state of the components and then it calls
history.replaceState(...) to update the URL with new search parameters.
It is working fine, but now we need to implement another unrelated feature, that requires us to check the current query parameters. And it turned out that there is a problem - if we will try accessing the route like this: const route = useRoute() or even simply $route directly in the template, this property does not change on navigation. It works on the first load on the server side - it correctly returns the route with all the parameters. But when doing client side navigation it just does not update, even though the URL changes.
I tried replacing it with router.replace(...). But I think it conflicts with some other logic. It looks like the navigation hapens twice. First time to the correct URL, but then it does the second navigation and it removes all query parameters 🤔 So maybe we would need to keep history.replaceState and somehow make it update the state of the router?
Do you have an idea what to do?0 Replies