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!

Inside setup method, this won't be available, that's why you're seeing this error. you need to do some work around to get the route params. you can try this link, it has many example for injecting route github.com/vuejs/rfcs/issues/70 — Naren
– Naren, Commented Oct 7, 2020 at 11:30
I also tried in created method as well. But there also i can not see. Also i tried with context.root.$route but then also its not working for me. — user3201500
– user3201500, Commented Oct 7, 2020 at 11:32

camwhite · Accepted Answer · 2021-06-03 20:22:30Z

52

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

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

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

edited Jun 3, 2021 at 20:22

answered Oct 7, 2020 at 16:28

camwhite

9478 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3201500 Over a year ago

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

Dom Over a year ago

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()')

aimme · Accepted Answer · 2022-11-15 08:59:15Z

Bit late but if you want query params to work on page refresh you have to wait for the router to get ready as its asynchronous. The router wont be ready if its a page refresh. The router will be ready if its navigation from another page in that case the query params will be available from the begining.

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

const router = useRouter()
const route = useRoute()

//just to demonstrate
console.log(route.query)
// If it is a page refresh it will print null.
// The router wont be ready if its a page refresh. In that case the query wont be available.
// The router will be ready if its navigation from another page in that case the query params will be available

onMounted(() => {
  getUrlQueryParams()
});

getUrlQueryParams = async () => {    
  //router is async so we wait for it to be ready
  await router.isReady()
  //once its ready we can access the query params
  console.log(route.query)
});
</script>

Herbert Van-Vliet · Accepted Answer · 2022-01-23 09:50:16Z

5

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>

answered Jan 23, 2022 at 9:50

Herbert Van-Vliet

82412 silver badges18 bronze badges

Comments

Dastin · Accepted Answer · 2023-07-28 08:05:47Z

1

To me, to get query params from the route after doing a push

this.$router.push({ 
    name: 'shopBellaProduct', 
    query: { 
       idProduct: productId,
    }
});

I need to call this:

mounted(){

   // Get an id product from query.
   this.idProduct = this.$route.query.idProduct;
},

Note: I have to instantiate and use the router before (I'm using "vue-router 4.0.13"):

// Vue Router.
import { createRouter } from 'vue-router'

//Create the router instance.
const router = createRouter({
  routes,
})

app.use(router)

answered Jul 28, 2023 at 8:05

Dastin

4,5972 gold badges27 silver badges26 bronze badges

Comments

Beerswiller · Accepted Answer · 2021-11-22 04:40:45Z

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$}
    }
}

alreich · Accepted Answer · 2024-07-01 14:16:01Z

0

difference is between using Options or composition API in vue.. i guess you can use the userRouter/useRoute in the Composition API and this.$route.query in the options API. i wonder at times why the 2 ways :/

answered Jul 1, 2024 at 14:16

alreich

1011 silver badge4 bronze badges

Collectives™ on Stack Overflow

Get URL query parameters in Vue 3 on Component

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related