快捷導(dǎo)航

Vue3路由query參數(shù)實(shí)例詳解

更新時(shí)間：2025年12月01日 14:19:10 作者：網(wǎng)絡(luò)點(diǎn)點(diǎn)滴

文章介紹了Vue3路由的query參數(shù),包括其定義、使用方法以及如何在組件中接收和展示query參數(shù),通過(guò)一個(gè)簡(jiǎn)單的實(shí)例,展示了如何在路由配置中添加query參數(shù),并在子組件中通過(guò)計(jì)算屬性獲取和顯示這些參數(shù),感興趣的朋友跟隨小編一起看看吧

Vue3路由query參數(shù)

基礎(chǔ)概念

query其實(shí)我們?cè)谡f(shuō)to的對(duì)象寫(xiě)法的時(shí)候已經(jīng)大致介紹過(guò)了，現(xiàn)在來(lái)仔細(xì)的講講；query參數(shù)是URL中？后面的部分，用于傳遞鍵值對(duì)數(shù)據(jù)；

例如https://example.com/users?page=1&search=vue

實(shí)例展示

首先為我們之前的項(xiàng)目，聯(lián)系我們?cè)O(shè)計(jì)一下嵌套路由，先更新路由的配置文件；

{
        path: '/Contact',
        component: Contact,
        name: 'contact',
        children: [{
            path: '',
            component: ContactContent.vue
        }]
    }]

之后我們直接寫(xiě)子組件代碼

<!-- components/ContactContent.vue -->
<template>
    <div class="contact-content">
        <!-- 根據(jù) query.type 顯示不同內(nèi)容 -->
        <div v-if="contentType === 'phone'" class="content-section">
            <h3>?? 電話聯(lián)系</h3>
            <div class="info-card">
                <p><strong>客服熱線：</strong> 400-123-4567</p>
                <p><strong>技術(shù)支持：</strong> 400-123-4568</p>
                <p><strong>投訴建議：</strong> 400-123-4569</p>
            </div>
            <div class="tips">
                <p>工作時(shí)間：周一至周五 9:00-18:00</p>
            </div>
        </div>
        <div v-else-if="contentType === 'email'" class="content-section">
            <h3>?? 郵箱聯(lián)系</h3>
            <div class="info-card">
                <p><strong>客服郵箱：</strong> service@example.com</p>
                <p><strong>技術(shù)支持：</strong> tech@example.com</p>
                <p><strong>合作咨詢：</strong> cooperate@example.com</p>
            </div>
            <div class="tips">
                <p>我們會(huì)在24小時(shí)內(nèi)回復(fù)您的郵件</p>
            </div>
        </div>
        <div v-else-if="contentType === 'address'" class="content-section">
            <h3>?? 地址信息</h3>
            <div class="info-card">
                <p><strong>總部地址：</strong> 北京市朝陽(yáng)區(qū)某某街道123號(hào)</p>
                <p><strong>上海分公司：</strong> 上海市浦東新區(qū)某某路456號(hào)</p>
                <p><strong>深圳辦事處：</strong> 深圳市南山區(qū)科技園789號(hào)</p>
            </div>
            <div class="tips">
                <p>來(lái)訪前請(qǐng)?zhí)崆邦A(yù)約</p>
            </div>
        </div>
        <div v-else-if="contentType === 'hours'" class="content-section">
            <h3>? 工作時(shí)間</h3>
            <div class="info-card">
                <p><strong>客服中心：</strong> 周一至周日 8:00-22:00</p>
                <p><strong>技術(shù)支持：</strong> 周一至周五 9:00-18:00</p>
                <p><strong>線下門(mén)店：</strong> 周一至周日 10:00-21:00</p>
            </div>
            <div class="tips">
                <p>節(jié)假日工作時(shí)間可能調(diào)整，請(qǐng)關(guān)注公告</p>
            </div>
        </div>
        <div v-else class="content-section">
            <h3>?? 歡迎聯(lián)系我們</h3>
            <p>請(qǐng)選擇上方的聯(lián)系方式查看詳細(xì)信息</p>
        </div>
    </div>
</template>

我們這里使用v-if來(lái)判斷頁(yè)面的內(nèi)容

<script setup>
import { useRoute } from 'vue-router'
import { computed } from 'vue'
const route = useRoute()
// 從 query 參數(shù)獲取內(nèi)容類型
const contentType = computed(() => {
    return route.query.type || 'phone' // 默認(rèn)顯示電話信息
})
</script>

這里使用一個(gè)計(jì)算屬性來(lái)獲取當(dāng)前路由的query的屬性，默認(rèn)情況下顯示電話信息

順便展示一下CSS的內(nèi)容

<style scoped>
.contact-content {
    padding: 20px;
}
.content-section h3 {
    color: #333;
    margin-bottom: 20px;
    font-size: 1.5em;
}
.info-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 15px;
    border-left: 4px solid #007bff;
}
.info-card p {
    margin: 10px 0;
    font-size: 16px;
}
.tips {
    background: #e7f3ff;
    padding: 12px 15px;
    border-radius: 5px;
    font-size: 14px;
    color: #666;
}
</style>

現(xiàn)在看主路由的配置

<template>
    <div class="contact-container">
        <h2 class="content-title">聯(lián)系我們</h2>
        <!-- 使用 router-link 的 to 對(duì)象寫(xiě)法傳遞 query 參數(shù) -->
        <div class="tab-buttons">
            <router-link :to="{
                path: '/contact',
                query: { type: 'phone' }
            }" class="tab-button">
                電話聯(lián)系
            </router-link>
            <router-link :to="{
                path: '/contact',
                query: { type: 'email' }
            }" class="tab-button">
                郵箱聯(lián)系
            </router-link>
            <router-link :to="{
                path: '/contact',
                query: { type: 'address' }
            }" class="tab-button">
                地址信息
            </router-link>
        </div>
        <!-- 子組件會(huì)通過(guò)路由自動(dòng)接收 query 參數(shù) -->
        <div class="content-area"><router-view></router-view></div>
    </div>
</template>

我們這里為每個(gè)路由鏈接添加一個(gè)query的type屬性，如果我們點(diǎn)擊這個(gè)按鈕的話，這個(gè)query就有type屬性的值了，這樣我們就可以被子組件收到了，然后就可以展示不同的內(nèi)容了，這里不要忘記在組件中使用router-view來(lái)渲染子路由的東西

父組件的也看下吧

<style scoped>
.contact-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}
.tab-buttons {
    display: flex;
    gap: 10px;
    margin: 20px 0;
    flex-wrap: wrap;
}
.tab-button {
    padding: 10px 20px;
    border: 1px solid #007bff;
    background: white;
    color: #007bff;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
}
.tab-button:hover,
.tab-button.router-link-active {
    background: #007bff;
    color: white;
}
.content-area {
    margin-top: 30px;
    min-height: 200px;
}
</style>