Routing Urls not working when already on the same url without query

[agcty]

Bug 🐞

What is the current behavior?

When using routing urls (in conjunction with Nuxt) the search box and hits aren't adapted when already being on the same route without a query.

Example:

1. Visit /search by clicking "Search"
2. Visit /search?query=apple by clicking "Search with query"
3. Hits aren't refined and nothing changes

Make a sandbox with the current behavior

https://codesandbox.io/s/nuxt-730w7

What is the expected behavior?

Hits are refined regardless of which page you are currently on.

To illustrate the expected behaviour follow these steps:

1. Visit /home by clicking "Home"
2. Visit /search?query=apple by clicking "Search with Query"

Does this happen only in specific situations?

Yes

What is the proposed solution?

Listening for query url changes not only for path changes

What is the version you are using?

2.6.0

Always try the latest one before opening an issue.

[Haroenv]

I think this is because the nuxt link doesn't trigger a page change (onPopState) which is what we use when you pass routing: true. Does nuxt have a callback for route change? If that's the case, you need to make a custom "router" (one of the keys of routing, if it's an object) which reads from there.

You can base yourself on the default router:

https://github.com/algolia/instantsearch.js/blob/develop/src/lib/routers/history.ts

[agcty]

I see the problem here, but shouldn't that be the default instantsearch.js behaviour? It would be a much better user experience.

Also another (probably far bigger) problem I just encountered is that when using router: true, it messes up the router history and to go back it needs two clicks of a button that calls "$router.back()".

To reproduce:

Code: https://codesandbox.io/s/nuxt-730w7 Full Screen Reproduction: https://730w7.sse.codesandbox.io/search

1. Visit /search by clicking "Search"
2. Go to a sub-page by clicking "Go to sub-page"
3. Try to go back by clicking the back button -> it will actually need two clicks instead of 1

To fix this behaviour just comment "router: true".

I don't know if these problems I described are related to each other, however, both are really annoying at the very least.

[Haroenv]

The second problem is unrelated, and related to the fact that we need to write an empty URL if people are not using an external routing system, but this doesn't exactly work as expected for external routers, as is the case for Vue Router. It's documented with a workaround here: https://github.com/algolia/instantsearch.js/issues/4162

[anat]

Same issue here

[Haroenv]

The original issue here has been explained since in the documentation, so I'll close this: https://www.algolia.com/doc/guides/building-search-ui/going-further/routing-urls/vue/#combining-with-nuxtjs. It would still be nice to have a nuxt/vuerouter integrated router, but getting the reference is non-trivial