title: Get URL query parameters in Vue 3 on Component
body: <p>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:</p>
  <pre><code>http://localhost:8001/login?id=1
  </code></pre>
  <p>Here is how my controller look like.</p>
  <pre><code>&lt;template&gt;
      &lt;section class=&quot;contact-info-area&quot;&gt;
          &lt;div class=&quot;container&quot;&gt;
              &lt;div class=&quot;row&quot;&gt;
                  &lt;div class=&quot;col-lg-12&quot;&gt;
                      &lt;section class=&quot;write-massage-area&quot;&gt;
                          &lt;div class=&quot;mb-5&quot;&gt;&lt;/div&gt;
                          &lt;div class=&quot;row justify-content-center&quot;&gt;
                              &lt;div class=&quot;col-lg-5&quot;&gt;
                                  &lt;div class=&quot;write-massage-content&quot;&gt;
                                      &lt;div class=&quot;write-massage-title text-center&quot;&gt;
                                          &lt;h3 class=&quot;title&quot;&gt;Login {{ $route.query.id }}&lt;/h3&gt; &lt;!-- THIS IS WORKING --&gt;
                                      &lt;/div&gt;
                                      &lt;div class=&quot;write-massage-input&quot;&gt;
                                          &lt;form @submit.prevent=&quot;onSubmitForm&quot;&gt;
                                              &lt;div class=&quot;row&quot;&gt;
                                              
                                                  &lt;div class=&quot;col-lg-12&quot;&gt;
                                                      &lt;div class=&quot;input-box mt-10&quot;&gt;
                                                          &lt;input type=&quot;text&quot; placeholder=&quot;Email&quot;  v-model=&quot;form['email']&quot;&gt;
                                                          &lt;ErrorMessage :validationStatus=&quot;v$.form.email&quot;&gt;&lt;/ErrorMessage&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                                  &lt;div class=&quot;col-lg-12&quot;&gt;
                                                      &lt;div class=&quot;input-box mt-10&quot;&gt;
                                                          &lt;input type=&quot;text&quot; placeholder=&quot;Password&quot;  v-model=&quot;form['password']&quot;&gt;
                                                          
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                                  &lt;div class=&quot;col-lg-12&quot;&gt;
                                                      &lt;div class=&quot;input-box mt-10 text-center&quot;&gt;
                                                          &lt;button type=&quot;submit&quot; class=&quot;main-btn main-btn-2&quot;&gt;Login&lt;/button&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                          &lt;/form&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;mb-5&quot;&gt;&lt;/div&gt;
                      &lt;/section&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  import { ref } from 'vue'
  import useVuelidate from '@vuelidate/core'
  import { required, minLength, email } from '@vuelidate/validators'
  import ErrorMessage from '../components/ErrorMessage'
  
  export default {
      name: &quot;login&quot;,
      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) **&lt;!-- THIS IS NOT WORKING --&gt;**
              v$.value.$touch()
              console.log(form.value)
          }
  
          return { form, onSubmitForm, v$}
      }
      
  }
  &lt;/script&gt;
  </code></pre>
  <p>here on the above code. On button submit i am going to a function called <code>onSubmitForm</code>, there i  am using <code>console.log(this.$route.query.id)</code> but this is giving a below error :</p>
  <pre><code>Uncaught TypeError: Cannot read property 'query' of undefined
      at Proxy.onSubmitForm (Login.vue?a55b:84)
  </code></pre>
  <p>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?</p>
  <p>Thank you!</p>