how to manipulate the query string in vue.js using Vue router

Question

I have a Vue.js app that has a tagging component. I'd like to add a url components like https://thisdomain.com/some?tag_ids=3,7,11 where a user can add tag_ids by toggling the tags in the UI.

While this is working for maintaining the tag_ids in the app. I'd also like to have them render in the browser url so that if the url is shared, it looks the same. I am using vue-router and I'd like to add the tag_ids to the query string but not force a new route in the path. I have tried something like:

   this.$router.push({ path: '/', tag_ids: this.selectedTagIds })

and

   this.$router.replace({ path: '/', tag_ids: this.selectedTagIds })

But this is not working. Any idea how to manipulate the query params via this.$router?

Bhojendra Rauniyar · Accepted Answer · 2018-03-25 02:14:01Z

2

You can use params:

//navigation
this.$router.push({ name: 'some', params: { tag_ids: this.selectedTagIds } })

//route
{ path: '/some', name: 'some', component: Some }

Or, you can use query like this:

this.$router.push({ path: '/some', query: { tag_ids: this.selectedTagIds } })

answered Mar 25, 2018 at 2:14

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

acdcjunior Over a year ago

Good one +!. I think query is what the OP seems to need.

Collectives™ on Stack Overflow

how to manipulate the query string in vue.js using Vue router

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related