Best way to sync state to vue-router path for deep-linking?

Let’s say I have some basic server API GET’s where I have filters as an object of key-value refinements like { userId: 13, category: 'posts', orderBy: 'price' }. I’d like to sync the filters state to the url so that the page can be deep-linked. I assumed the best way to include this kind of data is the query params. Unless I’m doing something wrong, this.$route.query is not reactive and can’t be pushed into. Am I left with manually changing the url with history.pushState or document.location.hash ? What is the best practice for this kind of thing ?

This is how I usually approach this: https://jsfiddle.net/posva/chyLjpv0/
I use router.replace to overwrite new query params

1 Like

Thanks. I’ll use router.push to retain the the back button navigation.
However, what I would’ve liked as an alternative is to use vue-router’s query parser to change the url string and just call a fetch method again instead of re-initializing the whole component with the new query string.

Actually, the component should not be re-initialised. Different queries or params doesn’t trigger a navigation. You have to watch the $route to trigger the watch manually

Is there a way to know if query has been changed from outside and not from previous replace/push call? So that I can skip processing those inside watch.

I am asking this because I would like to debounce updateQuery and not update the query for every state change, but only at the end of multiple state changes.