在组件上的 Vue 3 中获取 URL 查询参数

Posted 2023-02-23

【中文标题】在组件上的 Vue 3 中获取 URL 查询参数

【英文标题】：Get URL query parameters in Vue 3 on Component

【发布时间】：2021-01-22 07:50:06

【问题描述】：

我是 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 文档中也看到了这一点，他们以同样的方式提到了这一点。我缺少什么？

谢谢！

【问题讨论】：

在 setup 方法中，this 将不可用，这就是您看到此错误的原因。你需要做一些工作来获取路由参数。你可以试试这个链接，它有很多注入路由的例子github.com/vuejs/rfcs/issues/70

我也试过created方法。但我也看不到。我也尝试了context.root.$route，但它也不适合我。

【参考方案1】：

您可以拨打useRoute访问查询参数...

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

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

【讨论】：

非常感谢，我不知道为什么这个简单的东西在 Vue 文档的任何地方都很难找到。

以防万一它对任何人都有帮助，您似乎可以从“vue-router”获得两个对象。 'useRoute' 用于包含查询并表示当前路由。 'useRouter' 代表实际的路由器，可用于导航（如 'push()'）

【参考方案2】：

我有几个月没做前端了，不得不刷新 Vue 3 和路由查询属性，这个问题首先出现。

现在内存慢跑已经开始了，我相信正确的方法是将 props 从路由器传递到组件，如这里的示例所示 https://router.vuejs.org/guide/essentials/passing-props.html

基本上，调用你的路线

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

能够访问id 字段。

或者，您可以使用props: route => ( query: route.query ) 发送整个批次

在你的视图/组件中将它作为一个道具来选择

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$