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()
Javascript
<!-- 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>
|
Javascript
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;
|
Javascript
const { createApp } = require( 'vue' );
import App from './App.vue' ;
import createRouter from './router' ;
createApp(App).use(createRouter()).mount( '#app' );
|
Javascript
<!-- views/AboutView.vue file -->
<template>
<h1>This is About Page</h1>
</template>
<script>
export default {};
</script>
|
Javascript
<!-- views/ContactView.vue file -->
<template>
<h1>This is Contact Page</h1>
</template>
<script>
export default {}
</script>
|
Javascript
<!-- views/HomeView.vue file -->
<template>
<h1>This is Home Page</h1>
</template>
<script>
export default {}
</script>
|
How to Set URL Query Params in Vue with Vue-Router ?
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.
Table of Content
- Using router-link
- Using push() method
- Using replace() method
Contact Us