How to access query params in Vue.js

What are query parameters

Consider the following URL:

1http://localhost:5173/?user=alice&age=30

In the above URL, user=alice and age=30 are called query parameters.

There are couple of ways in which we can access query parameters in Vue. js. We will see both of them.

Using vue router

If you do not have Vue router installed in your application, then do so by running the following command:

1npm install vue-router@4

Now configure the routes in main.js file:

main.js

1import { createApp } from 'vue';
2import App from './App.vue';
3import "./style.css";
4import { createRouter, createWebHistory } from 'vue-router';
5
6const routes = [
7    { path: '/', component: App },
8];
9
10const router = createRouter({
11    history: createWebHistory(),
12    routes,
13});
14
15const app = createApp(App);
16app.use(router);
17app.mount('#app');

Now you can access the query parameters using the following code in your Vue component:

1<template>
2  <div>
3    <h1>User Details</h1>
4    <p>User: {{ route.query.user }}</p>
5    <p>Age: {{ route.query.age }}</p>
6  </div>
7</template>
8
9<script>
10import { useRoute } from "vue-router";
11
12export default {
13  setup() {
14    const route = useRoute(); // Access the current route and query params
15
16    return {
17      route,
18    };
19  },
20};
21</script>

If you want to update the query parameters manually, you can do so as shown below:

1<template>
2  <div>
3    <h1>Update Query Parameters</h1>
4    <!-- Button that triggers the updateQueryParams method -->
5    <button @click="updateQueryParams">Update Query Params</button>
6  </div>
7</template>
8
9<script>
10import { useRouter } from 'vue-router';
11
12export default {
13  setup() {
14    const router = useRouter();
15
16    const updateQueryParams = () => {
17      router.push({ query: { user: 'alice', age: 30 } });
18    };
19
20    return {
21      updateQueryParams,
22    };
23  },
24};
25</script>

Using the Web API: URLSearchParams

If you don't have Vue router installed and do not want to use Vue router, then you can leverage the URLSearchParams Web API as shown below:

1<template>
2  <div>
3    <h1>User Details</h1>
4    <p>User: {{ user }}</p>
5    <p>Age: {{ age }}</p>
6  </div>
7</template>
8
9<script>
10export default {
11  data() {
12    return {
13      user: "",
14      age: "",
15    };
16  },
17  mounted() {
18    const queryParams = new URLSearchParams(window.location.search);
19    this.user = queryParams.get("user") || "Guest";
20    this.age = queryParams.get("age") || "Unknown";
21  },
22};
23</script>

You can use the the window.history to update the URL parameters, without needing to use Vue router:

1<template>
2  <div>
3    <h1>Update Query Parameters</h1>
4    <button @click="updateQueryParams">Update Query Params</button>
5  </div>
6</template>
7
8<script>
9export default {
10  methods: {
11    updateQueryParams() {
12      // Get the current query parameters from the URL
13      const params = new URLSearchParams(window.location.search);
14
15      // Set new query parameters or update existing ones
16      params.set("user", "alice");
17      params.set("age", "30");
18
19      // Construct the new URL
20      const newUrl = `${window.location.pathname}?${params.toString()}`;
21
22      window.history.pushState(null, "", newUrl);
23
24    },
25  },
26};
27</script>

Do follow me on twitter where I post developer insights more often!

How to access query params in Vue.js

Table of Contents

What are query parameters

Using vue router

Using the Web API: URLSearchParams

Leave a Comment

Tools