How to Set URL Query Params in Vue with Vue-Router ?
Last Updated :
26 Jul, 2024
Vue Router is a navigation library designed specifically for Vue.js applications. In this article, we will learn about the different methods of setting the URL query params in Vue with Vue-Router. Below is the list of all possible methods.
Steps to Setup the Project Environment
Step 1: Create a VueJS application using the below command.
npm create vue@latest
Step 2: Navigate to the project that you have just created by this command.
cd your-project-name
Step 3: Run this command to install all packages
npm install
Step 4: Now, Set up vue router using below command.
npm install vue-router@4
Step 5: Create a folder inside src named views. Inside it, we will put all our components.
Step 6: Create components inside the views folder as listed below:
- AboutView.vue
- ContactView.vue
- HomeView.vue
Step 7: Create another file inside src named router.js. It will handle the routes of the application.
Step 8: Now Create a navbar inside the App.vue file to navigate easily around the webpage.
Step 9: Add the below code to main.js. It is the starting point of our application.
// main.js file
const { createApp } = require('vue');
import App from './App.vue';
import createRouter from './router';
createApp(App).use(createRouter()).mount('#app');
Project Structure:
Using router-link
We use the router-link component to create links to routes with specified query parameters. The "to" prop accepts an object with the path and query properties, allowing you to include query parameters.
Syntax:
<RouterLink :to="{ path: '/yourPath', query: { //yourParams } }" ></RouterLink>Example: The below JavaScript codes will help you implement the router-link method to set URL query params in Vue with Vue-Router.
HTML
<!-- src/App.vue file -->
<script>
import {
RouterView,
RouterLink,
useRouter,
useRoute
}
from 'vue-router';
const router = useRouter();
const route = useRoute();
export default {
name: '#app',
};
</script>
<template>
<nav>
<RouterLink :to="
{
path: '/',
query: { id: 1 }
}">Home</RouterLink> |
<RouterLink :to="
{
path: '/contact',
query: { id: 2 }
}">Contact</RouterLink> |
<RouterLink :to="
{
path: '/about',
query: { id: 3 }
}">About</RouterLink>
</nav>
<RouterView />
</template>
<style>
nav {
width: 100%;
font-size: 24px;
}
nav a {
display: inline-block;
padding: 5px 10px;
margin: 10px;
}
nav a.router-link-exact-active {
background-color: green;
color: #fff;
text-decoration: none;
}
</style>
<!-- views/ContactView.vue file -->
<template>
<h1>This is Contact Page</h1>
</template>
<script>
export default {}
</script>
// src/router.js
import {
createRouter,
createWebHistory
}
from 'vue-router';
import HomeView
from './views/HomeView.vue';
import ContactView
from './views/ContactView.vue';
import AboutView
from './views/AboutView.vue';
const router = () =>
createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/about',
name: 'about',
component: AboutView,
},
{
path: '/contact',
name: 'contact',
component: ContactView,
},
],
});
export default router;
// main.js file
const { createApp } = require('vue');
import App from './App.vue';
import createRouter from './router';
createApp(App).use(createRouter()).mount('#app');
<!-- views/HomeView.vue file -->
<template>
<h1>This is Home Page</h1>
</template>
<script>
export default {}
</script>
<!-- views/AboutView.vue file -->
<template>
<h1>This is About Page</h1>
</template>
<script>
export default {};
</script>
Output:
Using push() method
The push() method will help in setting the query params in the URL . You just need to replace your App.vue file with the below file in your project to implement this approach. It maintains a history stack while navigating
Syntax:
router.push({ path: '/yourPath', query: { yourparams } })Example: The below JavaScript codes will help you implement the router-link method to set URL query params in Vue with router.push()
HTML
<!-- App.vue file -->
<script>
import { RouterView,
RouterLink,
useRouter,
useRoute }
from 'vue-router';
export default {
name: '#app',
setup() {
const router =
useRouter();
const route =
useRoute();
function changeRoutes() {
if (router) {
router.push(
{
path: '/about',
query: { id: 1 }
});
}
}
return { router,
route,
changeRoutes };
},
};
</script>
<template>
<nav>
<RouterLink to="/">
Home
</RouterLink> |
<RouterLink to="/contact">
Contact
</RouterLink> |
<RouterLink to="/about">
About
</RouterLink><br />
<br />
<button @click="changeRoutes">
Set Query param using push()
</button>
</nav>
<RouterView />
</template>
<style>
nav {
width: 100%;
font-size: 24px;
}
nav a {
display: inline-block;
padding: 5px 10px;
}
nav a.router-link-exact-active {
background-color: green;
color: #fff;
text-decoration: none;
}
</style>
<!-- views/AboutView.vue file -->
<template>
<h1>This is About Page</h1>
</template>
<script>
export default {};
</script>
<!-- views/ContactView.vue file -->
<template>
<h1>This is Contact Page</h1>
</template>
<script>
export default {}
</script>
<!-- views/HomeView.vue file -->
<template>
<h1>This is Home Page</h1>
</template>
<script>
export default {}
</script>
// src/router.js
import { createRouter,
createWebHistory }
from 'vue-router';
import HomeView
from './views/HomeView.vue';
import ContactView
from './views/ContactView.vue';
import AboutView
from './views/AboutView.vue';
const router = () =>
createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/about',
name: 'about',
component: AboutView,
},
{
path: '/contact',
name: 'contact',
component: ContactView,
},
],
});
export default router;
// main.js file
const { createApp } = require('vue');
import App from './App.vue';
import createRouter from './router';
createApp(App).use(createRouter()).mount('#app');
Output:
Using replace() method
This method is helps in setting the query params in the URL .You just need to replace your App.vue file with the below file to implement this approach.It do not maintain a history stack while navigating
Syntax:
router.replace({ path: '/yourPath', query: { yourParams } })Example: The below JavaScript codes will help you implement the router-link method to set URL query params in Vue with router.replace()
HTML
<!-- App.vue file -->
<script>
import { RouterView,
RouterLink,
useRouter,
useRoute }
from 'vue-router';
export default {
name: '#app',
setup() {
const router = useRouter();
const route = useRoute();
function changeRoutes() {
if (router) {
router.replace(
{
path: '/contact',
query: { id: 1 }
});
}
}
return { router, route,
changeRoutes };
},
};
</script>
<template>
<nav>
<RouterLink to="/">
Home
</RouterLink> |
<RouterLink to="/contact">
Contact
</RouterLink> |
<RouterLink to="/about">
About
</RouterLink> <br /><br />
<button @click="changeRoutes">
Change route using replace()
</button>
</nav>
<RouterView />
</template>
<style>
nav {
width: 100%;
font-size: 24px;
}
nav a {
display: inline-block;
padding: 5px 10px;
margin: 10px;
}
nav a.router-link-exact-active {
background-color: green;
color: #fff;
text-decoration: none;
}
</style>
<!-- views/HomeView.vue file -->
<template>
<h1>This is Home Page</h1>
</template>
<script>
export default {}
</script>
<!-- views/ContactView.vue file -->
<template>
<h1>This is Contact Page</h1>
</template>
<script>
export default {}
</script>
<!-- views/AboutView.vue file -->
<template>
<h1>This is About Page</h1>
</template>
<script>
export default {};
</script>
// src/router.js
import {
createRouter,
createWebHistory
}
from 'vue-router';
import HomeView
from './views/HomeView.vue';
import ContactView
from './views/ContactView.vue';
import AboutView
from './views/AboutView.vue';
const router = () =>
createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/about',
name: 'about',
component: AboutView,
},
{
path: '/contact',
name: 'contact',
component: ContactView,
},
],
});
export default router;
// main.js file
const { createApp } = require('vue');
import App from './App.vue';
import createRouter from './router';
createApp(App).use(createRouter()).mount('#app');
Output:
Conclusion
In Vue.js managing URL query parameters with Vue Router is a powerful feature that allows you to create dynamic and interactive web applications. Vue Router helps to work with query parameters, enabling developers to update the URL and component state based on user interactions.
Similar Reads
How to pass query parameters with a routerLink ?
The task is to pass query parameters with a routerLink, for that we can use the property binding concept to reach the goal. Using property binding, we can bind queryParams property and can provide the required details in the object. What is Property Binding? It is a concept where we use square brack
2 min read
How to Integrate Vite with Vue.js?
Vite provides the flexibility and speed needed for modern web development by offering a fast-build tool and development server. Integrating Vite with Vue.js allows developers to use Vite’s efficient hot module replacement and optimized build processes while working with Vue's reactive framework. Thi
3 min read
How to Get Query Parameters from a URL in VueJS ?
Query parameters are part of a URL that assigns values to specified parameters. They start after the question mark and are separated by ampersands ("&") in the URL. For example, in the URL https://example.com?name=John&age=23, name=John and age=23 are query parameters. The below-listed metho
8 min read
How to use the useHistory hook in React Router?
React Router is a standard library system built on top of React and used to create routing in the React application using the React Router Package. It enables the navigation between views of various components in a React Application. React Router is useful for Single Page Applications (SPAs). To use
4 min read
How to use routing in Vue.js ?
Vue router: Vue Router helps link between the browser's URL/History and Vue's components allowing for certain paths to render whatever view is associated with it. A vue router is used in building single-page applications (SPA). The vue-router can be set up by default while creating your new project.
3 min read
How to Get Parameter Value from Query String in ReactJS?
In React query parameter are a way to pass the data as props from the url to react components. Getting parameter value from query string helps to render the dynamic data depending on the query.ApproachTo get the parameter value from query string in React we will be using the query-string packge. We
2 min read
How to pass parameters in Postman requests?
Postman is an API(application programming interface) development tool that helps to build, test and modify APIs. It can make various types of HTTP requests(GET, POST, PUT, PATCH), save environments for later use, and convert the API to code for various languages(like JavaScript, and Python). In this
2 min read
How to test query strings in Postman requests ?
To test query strings in Postman requests, we only need to simply enter the key and value of each parameter and Postman will append them to the URL automatically. To the end of the request URL, the parameters are appended using '?' and key-value pairs are separated by '&'. e.g. :- ?id=22&typ
3 min read
How to Get Query String Parameter in SvelteKit?
In this article, we will explore how to retrieve query string parameters in SvelteKit applications. Query parameters are often used to pass data in URLs, such as user preferences or search queries. Understanding how to access these parameters is crucial for building dynamic web applications.These ar
3 min read
How to Access URL Query String in Svelte?
URL query strings are a way to pass parameters to a web page through the URL. They appear after the question mark (?) in a URL and are typically used to convey data or state between different parts of a web application.In Svelte, you can access and manipulate these query parameters to dynamically di
3 min read