Vue Router example sandbox does not work

Bug 🐞

What is the current behavior?

The code sandbox example that accompanies Combining with Vue Router is broken. The console displays errors stating:

TypeError: Cannot read property ‘query’ of undefined

This appears to stem from the stateMapping.stateToRoute method in Home.vue.

This seems to cause the products and URL to not update when a refinement filter is selected.

Make a sandbox with the current behavior

Sandbox: https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/Vue+InstantSearch/routing-vue-router

What is the expected behavior?

When I select a refinement, I should see the product grid update and see the query string added/updated in the URL.

What is the proposed solution?

It looks like this is using old versions of many dependencies (including 3.0.3 of vue-instantsearch). I think this example sandbox just needs updated and the routing object needs to be fixed so the refinement selections work as expected. It does seem like the routeToState method is expecting properties to be there that are not (e.g. query, even when I manually add a query string to the URL).

What is the version you are using?

This sandbox uses these dependencies:

• algoliasearch: 3.33.0
• instantsearch.css: 7.3.1
• instatnsearch.js: 3.7.0
• qs: 6.7.0
• vue: 2.6.10
• vue-instantsearch: 3.0.2
• vue-router: 3.0.6

Updating these to their latest versions appear to have no affect. It seems like something is wrong with the actual code.

[calebanthony]

That’s what my edit does in my previous post. This sandbox fixes the problem: https://codesandbox.io/s/dreamy-tdd-3zzqn

And in creating my minimum reproducible example, I found my bug has to lie elsewhere in my application, because that example works.

[Haroenv]

ah yes, that’s right sorry! What I meant to say is compare the code of the history router and the custom Vue router, and use a code which is much closer to history (using window if available, use vue router just for getting the current URL / reading on server)