快捷導(dǎo)航

Vue3路由的props案例詳解

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

Vue3路由的props作用是將路由參數(shù)或自定義數(shù)據(jù)傳遞給路由組件作為props,布爾值傳遞params參數(shù),對象傳遞自定義數(shù)據(jù),函數(shù)可以進(jìn)行參數(shù)類型轉(zhuǎn)換和拼接自定義數(shù)據(jù),通過案例,展示了如何配置路由并使用props傳遞數(shù)據(jù),感興趣的朋友跟隨小編一起看看吧

Vue3路由的props

props的作用

它在路由里面的作用很簡單，就是是把路由參數(shù)、或者自定義數(shù)據(jù)，直接喂給路由組件當(dāng)作props使用，上面說的路由參數(shù)也就是我們之前使用params或者query傳的參數(shù)；

props的寫法

布爾值

只傳遞params參數(shù)，參數(shù)名和組件的props一致，寫法如：{ path: ‘/goods/:goodsId’, component: GoodsDetail, props: true }

對象

傳遞自定義的靜態(tài)數(shù)據(jù)，與路由參數(shù)毫無關(guān)系，寫法如：{ path: ‘/goods/:goodsId’, component: GoodsDetail, props: { isHot: true } }

函數(shù)

傳遞params/query參數(shù)，轉(zhuǎn)換參數(shù)類型，拼接自定義數(shù)據(jù),這個(gè)一般情況下是最常用的；寫法如：{ path: ‘/goods/:goodsId’, component: GoodsDetail, props: (route) => ({ goodsId: Number(route.params.goodsId), source: route.query.source }) }

小案例

比如我們以一個(gè)非常簡單的校園社團(tuán)系統(tǒng)作為例子

首先我們先看路由配置

//引入vue-router相關(guān)函數(shù)，創(chuàng)建路由實(shí)例，并使用HTML5的history模式
import { createRouter, createWebHistory } from "vue-router";
import ClubDetailBool from "../components/ClubDetailBool.vue";
import ClubDetailFunc from "../components/ClubDetailFunc.vue";
import ClubDetailObj from "../components/ClubDetailObj.vue";
const routes = [{
    path: '/club/bool/:clubId',
    name: 'ClubDetailBool',
    component: ClubDetailBool,
    props: true
}]
const router = createRouter({
    history: createWebHistory(),
    routes
});
export default routes;

現(xiàn)在我們先創(chuàng)建一個(gè)社團(tuán)列表的組件

<template>
    <div class="club-list">
        <h2>校園社團(tuán)列表</h2>
        <button @click="goToBool(1)">查看【布爾值寫法】籃球社詳情</button>
    </div>
</template>
<script>
import { useRouter } from 'vue-router';
const router = useRouter();
const goToBool = (clubId) => {
    router.push(`/club/bool/${clubId}`);
};
</script>
<style scoped>
button {
    margin: 10px;
    padding: 8px 16px;
    cursor: pointer;
}
</style>

我們先說第一個(gè)布爾值的案例

//ClubDetailBool.vue
<template>
    <div class="club-detail">
        <h3>社團(tuán)詳情</h3>
        <!-- 這個(gè)只能拿到params里面的clubID,拿不到靜態(tài)數(shù)據(jù)和query參數(shù) -->
        <p>社團(tuán)ID:{{ clubId }}</p>
    </div>
</template>
<script setup>
//接受props名稱必須和路由參數(shù)名稱一致
const props = defineProps({
    clubId: {
        type: String,
        required: true
    }
});
</script>

對象和函數(shù)的案例

import { createRouter, createWebHistory, RouteLocationNormalized } from 'vue-router'
// 導(dǎo)入三個(gè)組件，分別對應(yīng)三種props寫法（實(shí)際項(xiàng)目可復(fù)用一個(gè)組件，這里為了清晰分開）
import ClubDetailBool from '../components/ClubDetailBool.vue'
import ClubDetailObj from '../components/ClubDetailObj.vue'
import ClubDetailFunc from '../components/ClubDetailFunc.vue'
const routes = [
    // 寫法1：布爾值 —— 只傳遞params參數(shù)（clubId），參數(shù)名和組件props名一致
    {
        path: '/club/bool/:clubId',
        name: 'ClubDetailBool',
        component: ClubDetailBool,
        props: true // 布爾值寫法：自動(dòng)把params里的clubId傳給組件的props
    },
    // 寫法2：對象 —— 傳遞靜態(tài)數(shù)據(jù)（和路由參數(shù)無關(guān)）
    {
        path: '/club/obj/:clubId', // 路徑仍帶clubId，但對象寫法拿不到，僅做演示
        name: 'ClubDetailObj',
        component: ClubDetailObj,
        props: {
            recruitStatus: '招新中', // 靜態(tài)數(shù)據(jù)：不管路由參數(shù)是什么，組件都能拿到這個(gè)值
            maxMember: 50 // 靜態(tài)數(shù)據(jù)：社團(tuán)最大人數(shù)50
        }
    },
    // 寫法3：函數(shù)（最常用）—— 混合傳遞params/query/靜態(tài)數(shù)據(jù)，還能處理參數(shù)類型
    {
        path: '/club/func/:clubId',
        name: 'ClubDetailFunc',
        component: ClubDetailFunc,
        props: (route: RouteLocationNormalized) => ({
            clubId: Number(route.params.clubId), // 把params的clubId（字符串）轉(zhuǎn)數(shù)字
            source: route.query.source || '首頁', // 拿query參數(shù)（比如/club/func/1?source=社團(tuán)列表）
            recruitStatus: '招新中', // 靜態(tài)數(shù)據(jù)
            maxMember: 50 // 靜態(tài)數(shù)據(jù)
        })
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router

創(chuàng)建對象案例的組件

//ClubDetailObj.vue
<template>
    <div class="club-detail">
        <h3>【對象寫法】社團(tuán)詳情</h3>
        <p>招新狀態(tài)：{{ recruitStatus }}</p>
        <p>最大人數(shù)：{{ maxMember }}</p>
        <p>備注：只能拿到靜態(tài)數(shù)據(jù)，拿不到clubId/query參數(shù)</p>
    </div>
</template>
<script setup>
// 接收props：名稱和路由props對象里的鍵一致
const props = defineProps({
    recruitStatus: String,
    maxMember: Number
})
</script>

父組件

<template>
    <div class="club-list">
        <h2>校園社團(tuán)列表</h2>
        <!-- 跳轉(zhuǎn)布爾值寫法的詳情頁 -->
        <button @click="goToBool(1)">查看【布爾值寫法】籃球社詳情</button>
        <!-- 跳轉(zhuǎn)對象寫法的詳情頁 -->
        <button @click="goToObj(1)">查看【對象寫法】籃球社詳情</button>
        <!-- 跳轉(zhuǎn)函數(shù)寫法的詳情頁（帶query參數(shù)） -->
        <button @click="goToFunc(1)">查看【函數(shù)寫法】籃球社詳情</button>
    </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
// 跳轉(zhuǎn)布爾值寫法
const goToBool = (clubId) => {
    router.push({
        name: 'ClubDetailBool',
        params: { clubId }
    })
}
// 跳轉(zhuǎn)對象寫法
const goToObj = (clubId) => {
    router.push({
        name: 'ClubDetailObj',
        params: { clubId } // 雖然傳了clubId，但對象寫法拿不到
    })
}
// 跳轉(zhuǎn)函數(shù)寫法（帶query參數(shù)）
const goToFunc = (clubId) => {
    router.push({
        name: 'ClubDetailFunc',
        params: { clubId },
        query: { source: '社團(tuán)列表' }
    })
}
</script>
<style scoped>
button {
    margin: 10px;
    padding: 8px 16px;
    cursor: pointer;
}
</style>

App.vue也需要樣式，讓其好看一點(diǎn)

<template>
    <!-- 頁面整體布局 -->
    <div id="app">
        <!-- 導(dǎo)航欄：快速切換不同路由（三種 props 寫法） -->
        <nav class="nav">
            <h2>Vue3 路由 props 三種寫法演示</h2>
            <div class="nav-buttons">
                <!-- 跳轉(zhuǎn)布爾值寫法路由 -->
                <router-link to="/club/bool/1" class="nav-link" active-class="active">
                    布爾值寫法（僅傳 params）
                </router-link>
                <!-- 跳轉(zhuǎn)對象寫法路由 -->
                <router-link to="/club/obj/1" class="nav-link" active-class="active">
                    對象寫法（僅傳靜態(tài)數(shù)據(jù)）
                </router-link>
                <!-- 跳轉(zhuǎn)函數(shù)寫法路由（帶 query 參數(shù)） -->
                <router-link to="/club/func/1?source=導(dǎo)航欄" class="nav-link" active-class="active">
                    函數(shù)寫法（混合傳參+類型處理）
                </router-link>
                <!-- 回到社團(tuán)列表頁 -->
                <router-link to="/" class="nav-link" active-class="active">
                    社團(tuán)列表（跳轉(zhuǎn)測試）
                </router-link>
            </div>
        </nav>
        <!-- 路由出口：所有路由組件都會(huì)渲染到這里 -->
        <main class="content">
            <router-view />
        </main>
    </div>
</template>
<script setup>
// App.vue 作為根組件，這里無需額外邏輯，只需要提供路由出口即可
// 若需要全局樣式/全局邏輯，可在這里寫
</script>
<style scoped>
/* 全局樣式（scoped 僅作用于 App.vue，也可抽離到全局樣式文件） */
#app {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
}
/* 導(dǎo)航欄樣式 */
.nav {
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
    margin-bottom: 20px;
}
.nav h2 {
    margin: 0 0 15px 0;
    color: #333;
}
.nav-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
/* 路由鏈接樣式 */
.nav-link {
    padding: 8px 16px;
    text-decoration: none;
    color: #42b983;
    /* Vue 主題色 */
    border: 1px solid #42b983;
    border-radius: 4px;
    transition: all 0.2s;
}
.nav-link:hover {
    background-color: #42b983;
    color: white;
}
/* 激活的路由鏈接樣式 */
.nav-link.active {
    background-color: #42b983;
    color: white;
    font-weight: bold;
}
/* 內(nèi)容區(qū)域樣式 */
.content {
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
}
</style>