CODEWITHSUNDEEP
vue.jsvue-router
lbris
lbris

Reputation: 1249

VueJS : Dynamically change the URL depending on filters

I have a project for which I use VueJS (2.x) for the frontend part. I've made a component to do some filtering :

enter image description here

And I'd like to be able to change the URL according to the filters, so that I can share the URL and another user would land on the same search. At the stage of my screenshot, the URL should look like : my/long/url?username=test&email=@test. But I don't know how to achieve it.

Currently, when I add/remove a filter, I create a new URLSearchParams object that I commit to the vuex store and with a watch statement I query my backend again with the updated filters.

The thing is that my URL doesn't change, of course, because I do not pass by a this.$router.push(...) or whatever.

Maybe I started it wrong.

What is the good way of achieving this ? Knowing that routing to the same view with a new query part does trigger the error DuplicateNavigation...

Thanks in advance for your help :)

Upvotes: 3

Views: 2035

Answers (1)

Satish Shanker Dongol
Satish Shanker Dongol

Reputation: 76

I had achieved something similar to this by using the history.pushState This basically allows you to modify your URL even if you are not using $router.push

You can follow the URL for more details https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

Upvotes: 2

Related Questions