Set URL Query Params In Vue Using Vue-Router


This article will show you three ways on how to set URL Query or URL params in Vue using Vue-Router.

What is URL query?

In simple words, a URL query is a key-value pair that we see at the end of a URL after the question mark sign (?). It is a portion of a URL which is use to pass data to the back-end.

You can see it when we do a search in a website, like YouTube or google.

https://www.google.com/search?q=query

In Vue, there are 3 ways to set query params in a URL:

  1. router-link
  2. router.push()
  3. router.replace()

Let's see each one with an example.

In <router-link /> we can use the :to="" prop to set our query params. The <router-link />Β to create anchor tags for declarative navigation in Vue.

Example:

<router-link :to="{ path: '/gallery', query: { id: 1 } }">gallery</router-link>

Here we have set a query with an id:1. Check the example below to see the code in action.

router.push() to dynamically add query params in URL in Vue

router.push let us dynamically set query params in a URL. It pushes a new entry into the history stack, so whenever a user click the back button in the browser it returns back to the previous page.

Syntax:

router.push(location, onComplete?, onAbort?)

Example:

this.$router.push({ path: "/gallery", query: { id: 1 } });

If you want to set multiple query you can pass it like this:

this.$router.push({ path: "/gallery", query: { id: 1, name: "parker"} } });

Note:

You can access the router instant as $router. Therefore, you can call this.$router.push()

Set query params in Vue using router.replace()

router.replace() is same as router.push() , the only difference is that it navigates to a different route without pushing a new history entry. It just replace the current entry.

So you cannot press the back button in your browser to return to the previous page.

Example:

this.$router.replace({ path: "/gallery", query: { id: 1 } });

DEMO

Edit programmatic routing

Related Topics:

How To Redirect To External Url In Vue

How To Call A Function In VUE Template?

Include External CSS File In Vue.Js Component

Add External Script Tags In Vue JS Component

How To Set Default Value Of Props In VueJS ?


πŸ’Ύ Recommended Articles