how to send query parameters in url vuejs
Sending Query Parameters in URL in Vue.js
To send query parameters in the URL in Vue.js, you can use the router-link component provided by Vue Router. Here are the steps to do it:
- Define the route in your router configuration:
- In your Vue Router configuration file (usually
router/index.js), define the route that will accept the query parameters. For example, let's say you have a route named "example" that accepts two query parameters, "param1" and "param2". The route definition would look like this:
javascript
{
path: '/example',
name: 'example',
component: ExampleComponent
}
- Use the
router-linkcomponent to generate the URL with query parameters: - In your Vue component where you want to generate the URL with query parameters, use the
router-linkcomponent and specify the route name and the query parameters as props. For example, to generate a link to the "example" route with the query parameters "param1" and "param2" set to "value1" and "value2" respectively, you can use the following code:
html
<router-link :to="{ name: 'example', query: { param1: 'value1', param2: 'value2' } }">Go to Example</router-link>
This will generate a link that looks like /example?param1=value1¶m2=value2.
- Access the query parameters in the target component:
- In the component that corresponds to the route where the query parameters are sent, you can access the query parameters using the
$route.queryobject. For example, in the "example" component, you can access the query parameters like this:
javascript
export default {
mounted() {
console.log(this.$route.query.param1); // Output: "value1"
console.log(this.$route.query.param2); // Output: "value2"
}
}
This will log the values of the query parameters to the console when the component is mounted.
That's it! You have now successfully sent query parameters in the URL in Vue.js using Vue Router.
Note: Make sure you have Vue Router properly set up in your Vue.js project for this to work.