How to use replace() method In Vue

Using push() 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()

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.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>

Javascript

// 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;

Javascript

// main.js file
 
const { createApp } = require('vue');
import App from './App.vue';
import createRouter from './router';
 
createApp(App).use(createRouter()).mount('#app');

Javascript

<!-- views/HomeView.vue file -->
 
<template>
    <h1>This is Home 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/AboutView.vue file -->
 
<template>
    <h1>This is About Page</h1>
</template>
<script>
    export default {};
</script>

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.

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

Tags:

#Geeks Premier League 2023 #Vue.JS #Geeks Premier League #JavaScript #Web Technologies

Using push() method

How to use replace() method In Vue

Syntax:

Javascript

Javascript

Javascript

Javascript

Javascript

Javascript

Conclusion

How to Set URL Query Params in Vue with Vue-Router ?

Similar Reads

Contact Us