How to use Vue Router’s $route in Options API In Vue

Utilizing JavaScript’s URL and URLSearchParams

If you’re working with Vue 2 or prefer the Options API in Vue 3, you can leverage the this.$route object to access the query parameters.

Syntax:

const queryParams = this.$route.query;

Example: The below code implements the $route in the options API to get query parameters in URL.

Javascript

<!-- QueryParameters.vue file -->
<template>
    <div id="container">
        <h2>
            Getting query parameters from URL Using 
            Router's $route in options API
        </h2>
        <h3>
            Click the below button to get the query parameters.
        </h3>
        <button class="btn" @click="getQueryParams">
            Get Query Parameters
        </button>
        <div v-if="showQueryParams">
            <p v-if="queryParams.name">
                Below are the query parameters contained by the URL.
            </p>
            <p v-if="queryParams.name">Name: {{ queryParams.name }}</p>
            <p v-if="queryParams.age">Age: {{ queryParams.age }}</p>
            <p v-else>URL does not contain any query parameters</p>
        </div>
    </div>
</template>
 
<script>
    import { useRoute } from 'vue-router';
 
    export default {
        name: 'DisplayQueryParams',
        data() {
            return {
                queryParams: {},
                showQueryParams: false,
            };
        },
        methods: {
            getQueryParams() {
                this.queryParams = this.$route.query;
                this.showQueryParams = true;
            },
        },
    };
</script>
 
<style>
    #container {
        text-align: center;
    }
 
    .btn {
        color: #fff;
        background: green;
        border: none;
        padding: 10px;
        margin: 15px;
        border-radius: 5px;
        cursor: pointer;
    }
</style>

Javascript

<!-- HomeView.vue file -->
<template></template>
<script>
    export default {};
</script>
 
<style>
    .btn {
        color: #fff;
        background: green;
        border: none;
        padding: 10px;
        margin: 15px;
        border-radius: 5px;
        cursor: pointer;
    }
</style>

Javascript

<!-- App.vue file -->
<script>
    import { RouterView } from 'vue-router';
    import { useRouter } from 'vue-router';
 
    export default {
        setup() {
            const router = useRouter();
            return { router };
        },
        methods: {
            navigate() {
                this.router.push({ path: '/queryParameters' });
            },
            navigateWithQueryParams() {
                this.router.push(
                    { 
                        path: '/queryParameters', 
                        query: { name: 'John', age: '23'
                    } 
                });
            },
        },
    };
</script>
 
<template>
    <div id="cont">
        <h1 style="color: green">w3wiki</h1>
        <h3>
            Click below buttons to change the URL and get 
            query parameters if they are avaialble in the URL.
        </h3>
        <div>
            <button class="btn" @click="navigate">
                URL with no query params
            </button>
            <button class="btn" @click="navigateWithQueryParams">
                URL with query params
            </button>
        </div>
        <RouterView />
    </div>
</template>
 
<style>
    #cont {
        text-align: center;
    }
</style>

Javascript

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

Javascript

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';
import QueryParameters from '../views/QueryParameters.vue';
 
const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            name: 'home',
            component: HomeView,
        },
        {
            path: '/queryParameters',
            name: 'QueryParameters',
            component: QueryParameters,
        },
    ],
});
 
export default router;

Output:

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 methods can be utilized to get the query parameters from a URL in VueJS.

Table of Content

Using Vue Router’s useRoute hook
Using Vue Router’s $route in Options API
Utilizing JavaScript’s URL and URLSearchParams

Tags:

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

Using Vue Router’s useRoute hook

Utilizing JavaScript’s URL and URLSearchParams

How to use Vue Router’s $route in Options API In Vue

Syntax:

Javascript

Javascript

Javascript

Javascript

Javascript

How to Get Query Parameters from a URL in VueJS ?

Similar Reads

Contact Us