Get URL query parameters in Vue 3 on Component

Question

i am new to Vue JS, i must say i really love this platform. I started using it just 3 days back. I am just trying to get the URL query parameter and i am using vue-router as well. Here is how i have it:

http://localhost:8001/login?id=1

Here is how my controller look like.

<template>
    <section class="contact-info-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <section class="write-massage-area">
                        <div class="mb-5"></div>
                        <div class="row justify-content-center">
                            <div class="col-lg-5">
                                <div class="write-massage-content">
                                    <div class="write-massage-title text-center">
                                        <h3 class="title">Login {{ $route.query.id }}</h3> <!-- THIS IS WORKING -->
                                    </div>
                                    <div class="write-massage-input">
                                        <form @submit.prevent="onSubmitForm">
                                            <div class="row">
                                            
                                                <div class="col-lg-12">
                                                    <div class="input-box mt-10">
                                                        <input type="text" placeholder="Email"  v-model="form['email']">
                                                        <ErrorMessage :validationStatus="v$.form.email"></ErrorMessage>
                                                    </div>
                                                </div>
                                                <div class="col-lg-12">
                                                    <div class="input-box mt-10">
                                                        <input type="text" placeholder="Password"  v-model="form['password']">
                                                        
                                                    </div>
                                                </div>
                                                <div class="col-lg-12">
                                                    <div class="input-box mt-10 text-center">
                                                        <button type="submit" class="main-btn main-btn-2">Login</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-5"></div>
                    </section>
                </div>
            </div>
        </div>
    </section>
</template>

<script>

import { ref } from 'vue'
import useVuelidate from '@vuelidate/core'
import { required, minLength, email } from '@vuelidate/validators'
import ErrorMessage from '../components/ErrorMessage'

export default {
    name: "login",
    components: {
        ErrorMessage
    },
    created(){
    },
    setup(){
        const form = ref({})

        const rules = {
            form: {
                email: {
                    required,
                    email
                },
                password: {
                    required,
                    minLength : minLength(5)
                }
            }
        }
        const v$ = useVuelidate(rules, { form })


        function onSubmitForm(){
            console.log(this.$route.query.id) **<!-- THIS IS NOT WORKING -->**
            v$.value.$touch()
            console.log(form.value)
        }

        return { form, onSubmitForm, v$}
    }
    
}
</script>

here on the above code. On button submit i am going to a function called onSubmitForm, there i am using console.log(this.$route.query.id) but this is giving a below error :

Uncaught TypeError: Cannot read property 'query' of undefined
    at Proxy.onSubmitForm (Login.vue?a55b:84)

Why this is happening? I am seeing that in the vue document as well, they mentioned in the same way. What i am missing in this?

Thank you!

Solution

You can call useRoute to access the query params...

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
console.log(route.query)
</script>

Comments

[user3201500]

Thank you so much, i dont know, why this simple thing was so difficult to find any where on Vue document.

[Dom]

Just in case it helps anyone it seems that there's two objects that you can obtain from 'vue-router'. 'useRoute' is for contains the query and represents the current route. 'useRouter' represents the actual router and can be used for navigation (like 'push()')