在 Component 上获取 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 文档中看到，他们以同样的方式提到。我在这方面缺少什么？

谢谢！

原文由 user3201500 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

原文由 camwhite 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 Herbert Van-Vliet 发布，翻译遵循 CC BY-SA 4.0 许可协议