在组件上的 Vue 3 中获取 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

我有几个月没有做前端了，不得不刷新 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 })

发送整批

在你的 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$}
    }
}

Answer 3

如果您使用参数并且您的端点看起来像这样：

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

你的路由是这样的：

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

然后你可以这样取值：

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

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

Get URL query parameters in Vue 3 on Component

vue.js

vue-router

vue-component