Scribd
Upload
11 views2 pages

Using Query Params in Vue Router

In Vue.js, you can use <router-link> to pass query parameters as strings to a destination component. The destination component can access these parameters using $route.query or the useRoute() function. For complex data types, you should use JSON.stringify() before sending and JSON.parse() when receiving the data.

Uploaded by

someonehaha
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views2 pages

Using Query Params in Vue Router

In Vue.js, you can use <router-link> to pass query parameters as strings to a destination component. The destination component can access these parameters using $route.query or the useRoute() function. For complex data types, you should use JSON.stringify() before sending and JSON.parse() when receiving the data.

Uploaded by

someonehaha
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Query Params with Router

how to use query with router link in vue js to transfer data


as string

In [Link], you can pass query parameters using <router-link> to transfer data as a string.
Here's how:

Using query in <router-link>


Vue Router allows you to pass data as query parameters like this:

vue

<router-link :to="{ path: '/destination', query: { message: 'Hello World' } }">


Go to Destination
</router-link>

Accessing Query Parameters in the Destination Component


In the [Link] component, you can access the query parameter using
$[Link] :

vue

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();


const message = [Link]; // "Hello World"
</script>

<template>
<div>
<h2>Received Message: {{ message }}</h2>
</div>
</template>

Alternative: Using this.$[Link] in Options API


If you're using the Options API:

vue

1/2
export default {
computed: {
message() {
return this.$[Link];
}
}
}

Final Notes
Query parameters are always strings, so if you need objects or arrays, you may need to
[Link]() before sending and [Link]() when receiving.

Example:

vue

<router-link :to="{ path: '/destination', query: { data: [Link]({ name:


'Oussama' }) } }">
Send Object
</router-link>

Then, retrieve it like:

vue

const data = [Link]([Link]);

Let me know if you need a more advanced example! 🚀

2/2

You might also like