Get URL query parameters in Vue 3 on Component

user_3201500 0
Viewed 20301

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!

vue-router vue-component vue.js
3 Answers

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

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

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

If you use parameters and your endpoint looks something like this:

{
  path: '/inspect_detail/:id',
  name: 'inspect_detail',
  component: function() {
    return import ( '../views/Inspect_detail.vue')
  },
  params: true
},

and you are routing like this:

<router-link :to="{ name: 'inspect_detail', params: { id: akey }}">...</router-link>

then you can pickup the values like this:

<script>
import { useRoute } from 'vue-router';
export default {
  setup(){
    const route = useRoute()
    console.log( route.params );
  }
}
</script>
user_41775650

I hadn't done frontend in a couple of months and had to refresh on Vue 3 and route query properties, and this question came up first.

Now the memory jog has kicked in, I believe the correct way is to pass the props from the router to the component as shown in the examples here https://router.vuejs.org/guide/essentials/passing-props.html

Essentially, call your route

{
    path: "/login",
    name: "Login",
    props: route => ({ id: route.query.id }),
    component: () => import(/* webpackChunkName: "login" */ "../views/Login.vue"),
},

to be able to access the id field.

Alternately, you can sent the whole lot with props: route => ({ query: route.query })

Pick it up as a prop in your view/component

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

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


        function onSubmitForm(){
            console.log(props.id)
            v$.value.$touch()
            console.log(form.value)
        }

        return { form, onSubmitForm, v$}
    }
}
user_33349660
Related