在 Vue 3 on Component 中获取 URL 查询参数

Question

我是 Vue JS 的新手，我必须说我真的很喜欢这个平台。3 天前我开始使用它。我只是想获取 URL 查询参数，我也在使用 vue-router。这是我如何拥有它：

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

这是我的控制器的样子。

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

上面的代码在这里。在按钮提交时，我将转到一个名为 的函数onSubmitForm，我正在使用console.log(this.$route.query.id)该函数，但这给出了以下错误：

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

为什么会发生这种情况？我在 vue 文档中也看到了，他们以同样的方式提到。我在这缺少什么？

谢谢！

Answer 1

您可以调用useRoute访问查询参数...

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

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

Answer 2

有点晚了，但如果您希望查询参数在页面刷新时起作用，您必须等待路由器准备好作为其异步。如果页面刷新，路由器将不会准备好。如果从另一个页面导航，则路由器将准备就绪，在这种情况下，查询参数将从一开始就可用。

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