javascript - Pass Vue query parameter from current route to router-link

Question

I know this cannot be this difficult, all I want to do is detect the query parameter and pass it to my component. What do I have to do to access router from a component in Vue?

<router-link :to="{ path: '/', query: { myQuery: /*query parameter here/* } }" >Go There</router-link>

No matter what I do I can't figure it out. I've tried everything I can find online, and for some reason in Vue "this" doesn't exist, and I'm literally ready to give up and go back to Angular.

Seriously, I can't even access it inside the tag, and importing the actual router from the routing file does nothing.

How do I make this happen? I feel like it shouldn't be this complicated just to get query parameters from the url in ANY framework. I've been reading manuals all day, can somebody please just help me out here?

question from:https://stackoverflow.com/questions/65713260/pass-vue-query-parameter-from-current-route-to-router-link

Answer 1

The current route's query is in this.$route.query and you can pass that entire query object on to another route if you want to preserve it in the destination:

<router-link
  :to="{ path: '/', query: $route.query }"
>
  Go There
</router-link>

If you only want to pass a specific query param:

<router-link
  :to="{ path: '/', query: { myQuery: $route.query.myQuery }}"
>
  Go There
</router-link>