vuejs路由的傳參及路由props配置詳解

更新時間：2022年07月21日 09:01:02 作者：itclanCoder

最近在學(xué)習(xí)vue router的傳參,所以下面這篇文章主要給大家介紹了關(guān)于vuejs路由的傳參及路由props配置的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

在Vue項(xiàng)目里,去實(shí)現(xiàn)左側(cè)菜單邊欄多級內(nèi)容的展示,導(dǎo)航的切換,以及內(nèi)容鏈接的跳轉(zhuǎn)等,用的都是前端路由vue-router,它的重要性,不可言喻

下面介紹一下Vue中的路由傳參以及路由的prps配置

方式1-使用query方式

這里循環(huán)遍歷一個列表為例,query的方式,跳轉(zhuǎn)的url后面攜帶的一些具體的參數(shù),比如下面的攜帶id,和name

to字符串的寫法

<router-link :to="`/new/detail?id=${item.id}&name=${item.name}`">{{item.name}}</router-link>

to對象的寫法

 <router-link :to="
    {
      path: '/new/detail',
      query:{
        id: item.id,
        name: item.name
    }
}">{{item.name}}
</router-link>

以上對象的寫法,相比于字符串的寫法,雖然麻煩了一點(diǎn),但是比較清晰,當(dāng)傳入的參數(shù)比較多時,比較適合,而且也易維護(hù)

如下是完整的組件代碼,定義了一個NewCom.vue的組件

<template>
    <div>
        <ul>
            <li v-for="item in lists" :key="item.id">
                <router-link :to="`/new/detail/?id=${item.id}&name=${item.name}`">{{item.name}}</router-link>
            </li>
            <router-view></router-view>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'NewCom',
        data() {
            return {
                lists: [
                    {
                        id: "1",
                        name: 'IT資源網(wǎng)',
                        url: 'https://itclan.cn'
                    },
                    {
                        id: '2',
                        name: 'itclanCoder',
                        url: 'https://coder.itclan.cn'
                    },
                    {
                        id: '3',
                        name: '客來影視TV',
                        url: 'https://video.itclan.cn'
                    },
                    {
                        id: '4',
                        name: '發(fā)卡商城',
                        url: 'https://faka.itclan.cn'
                    },
                    {
                        id: '5',
                        name: '愛客來科技',
                        url: 'https://aikelaidev.cn'
                    }
                ]
            }
        }
    }
</script>

<style lang="scss" scoped>
ul,li {
    list-style: none;
}
</style>

那組件的另一邊如何去接收傳遞過去的參數(shù)呢,通過this.$route.query的方式進(jìn)行接收

 <p>{{this.$route.query.id}} {{this.$route.query.name}}</p>

命名路由

在路由跳轉(zhuǎn)時,to后面跟著路徑這種寫法是沒什么問題的,但會發(fā)現(xiàn),也很麻煩,有時,通過一個名稱來標(biāo)識一個路由,就會顯得更方便一些的,特別是在鏈接一個路由,或是執(zhí)行一些跳轉(zhuǎn)的時候,你可以在創(chuàng)建Router實(shí)例的時候

在routes配置中某個路由設(shè)置名稱,如下代碼所示

import VueRouter from "vue-router"

import New from   "../components/NewCom.vue";
import About from "../components/AboutCom.vue";
import Detail from "../components/DetaiCom.vue";

// 創(chuàng)建router示例對象
const router  = new VueRouter({
    routes: [
        {
            name: 'new',
            path: '/new',
            component: New,
            children: [
                {
                    name: "detailPage",   // 用name命名路由的名稱
                    path: 'detail',
                    component: Detail
                }
            ]
        },
        {
            path: '/about',
            component: About
        }
    ]
})

export default router;

那么另一邊路由跳轉(zhuǎn)時,直接使用name就可以了,不用寫具體的路徑path了的,如下所示

 <router-link :to="
       {
        name: 'detailPage', // 此處使用name就可以了的,其他的不變
        query: {
          id: item.id,
          name: item.name
       }
 }">{{item.name}}</router-link>

命名路由,其實(shí)就是可以簡化路由的跳轉(zhuǎn)

<!--簡化前,需要填寫完整的路徑-->
<router-link to="/new/detail"></router-link>
<!-- 簡化后,直接通過名字跳轉(zhuǎn) -->
<router-link :to="{name:'detailPage'}"></router-link>
<!--簡化寫法配合query傳遞參數(shù)-->
<router-link :to="{
    name: 'detailPage',
    query: {
        id: '111',
        name: 'itclan.cn'
    }
}">
</router-link>

推薦使用命名路由,在調(diào)試和尋找組件的時候,可以根據(jù)路由的名字,排查問題

方式2-路由的params參數(shù)

這個路由的params參數(shù),簡單一點(diǎn)來說就是路徑的的參數(shù),并不是像query一樣那么直觀,而是如下所示,路徑最后面的/1/IT資源網(wǎng)是params參數(shù),它是動態(tài)的

http://localhost:8080/#/new/detail/1/IT資源網(wǎng)

在官方文檔里,這種被北城動態(tài)路由的匹配,就是把某種模式匹配到的所有路由,全都映射到同一個組件上,比如這個detail組件

對于所有id各不同的詳情頁,都要使用這個組件來渲染,那么在定義路由規(guī)則,配置時,就可以使用動態(tài)路徑參數(shù)；來實(shí)現(xiàn),如下所示

import VueRouter from "vue-router"

import New from   "../components/NewCom.vue";
import About from "../components/AboutCom.vue";
import Detail from "../components/DetaiCom.vue";

// 創(chuàng)建router示例對象
const router  = new VueRouter({
    routes: [
        {
            name: 'new',
            path: '/new',
            component: New,
            children: [
                {
                    name: "detailPage",   // 用name命名路由的名稱
                    // path: 'detail',   // 非動態(tài)路由設(shè)置
                    // 動態(tài)路徑參數(shù)，以冒號開頭:參數(shù)名
                    path: 'detail/:id/:name', // 使用占位符聲明接收的params參數(shù)
                    component: Detail
                }
            ]
        },
        {
            path: '/about',
            component: About
        }
    ]
})

export default router;

那在組件中如何傳遞參數(shù)呢,如下所示

 <router-link :to="`/new/detail/${item.id}/${item.name}`">{{item.name}}</router-link>

或如下對象的寫法

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

兩種寫法:歸納一下

<!--跳轉(zhuǎn)并攜帶params參數(shù),to的字符串寫法-->
<router-link :to="/new/detail/1/IT資源網(wǎng)">新聞</router-link>
<router-link :to="{name: 'detailPage',params: {id:1,name:'IT資源網(wǎng)'}}">

特別注意: 路由攜帶params參數(shù)時,若使用to的對象寫法,則不能使用path配置項(xiàng),必須使用name配置

另一邊組件如何接收的？**通過this.$route.params**可以進(jìn)行接收

query與params的區(qū)別

params傳參,必須使用命名路由方式傳參

<router-link :to="
{
    path: '/new/detail', // 如果是params,動態(tài)路由方式,這種方式是不生效的
    params: {
    id: item.id,
    name: item.name
    }
}
">{{item.name}}</router-link>

params傳參,不會顯示在地止欄上,會保存在內(nèi)存中,刷新會丟失，可以配合本地存儲localStorage進(jìn)行使用
query的參數(shù)會顯示在地止欄上,不會丟失

路由的props配置

讓路由組件更方便的收到參數(shù)

我們知道在Vue中子組件接收父組件傳遞過來的數(shù)據(jù),是用props進(jìn)行接收,那么同樣路由組件也是可以這么操作的

在接收傳遞過來的參數(shù)的組件,使用$route會與路由緊密耦合,但是不是很靈活,會寫一堆的this.$route.params或this.$route.query這樣的代碼去讀取傳遞過來的參數(shù)

路由配置的布爾模式

當(dāng) props 設(shè)置為 true 時，route.params 將被設(shè)置為組件的 props 它是在對應(yīng)的路由組件配置,設(shè)置props:true,如下所示

// 省略
// 創(chuàng)建router示例對象
const router  = new VueRouter({
    routes: [
        {
            name: 'new',
            path: '/new',
            component: New,
            children: [
                {
                    name: "detailPage",   // 用name命名路由的名稱
                    // path: 'detail',   // 非動態(tài)路由設(shè)置
                    path: 'detail/:id/:name', // 使用占位符聲明接收的params參數(shù)
                    component: Detail,
                    props: true   // 此處設(shè)置props: true
                }
            ]
        },
        {
            path: '/about',
            component: About
        }
    ]
})

export default router;

那么在接收使用參數(shù)的組件,通過props: ['參數(shù)1','參數(shù)2']

<template>
    <div>
        <!-- 直接在模板中可以使用 -->
       <p>{{id}} {{name}}</p>
    </div>
</template>

<script>
    export default {
        name: 'DetailCom',
        props: ['id','name'],   // 通過props進(jìn)行接收
        mounted() {
            console.log(this.$route);
        }
    }
</script>

路由配置的對象模式

我們有時候,不僅僅是需要傳入動態(tài)的參數(shù),也需要傳入靜態(tài)的參數(shù)(寫死的參數(shù))傳給路由組件,那么這個時候,props對象模式就會很有用,如下所示

const router  = new VueRouter({
    routes: [
        {
            name: 'new',
            path: '/new',
            component: New,
            children: [
                {
                    name: "detailPage",   // 用name命名路由的名稱
                    path: 'detail/:id/:name', // 使用占位符聲明接收的params參數(shù)
                    component: Detail,
                    props: {         // 對象形式,靜態(tài)參數(shù)
                       url: 'https://itclan.cn' 
                    }
                }
            ]
        },
    ]
})

在路由組件接收使用參數(shù),依舊使用props:['url']進(jìn)行接收

注意的是:當(dāng)props為對象時,那么動態(tài)的參數(shù),就失效了,只有靜態(tài)參數(shù)才有用

所以接下來介紹的路由函數(shù)模式,就可以兼顧動態(tài)的路由參數(shù)與靜態(tài)參數(shù)的結(jié)合

路由配置函數(shù)模式

props值為函數(shù),該函數(shù)返回的對象中每一組key-vaue都會通過props傳給路由組件

這種方式很好的解決了路由組件傳參中對象模式的弊端,可以兼顧靜態(tài)參數(shù)與動態(tài)參數(shù)

如下所示

// 創(chuàng)建router示例對象
const router  = new VueRouter({
    routes: [
        {
            name: 'new',
            path: '/new',
            component: New,
            children: [
                {
                    name: "detailPage",   // 用name命名路由的名稱
                    path: 'detail/:id/:name', // 使用占位符聲明接收的params參數(shù)
                    component: Detail,
                    props(route) {       // props值為函數(shù)形式,接收一個參數(shù)route,并且返回一個對象
                        return {
                            id: route.params.id,
                            name: route.params.name,
                            url: 'https://itclan.cn'
                        }
                    }
                    // 等價如下兩種寫法
                    // 可以對參數(shù)進(jìn)行解構(gòu)
                    /*
                     props({params}) {
                         return {
                             id: params.id,
                             name: params.name,
                             url: 'https://itclan.cn'
                         }
                     }*/
                    // 對象的解構(gòu)以及連續(xù)賦值,語義化不明確,不推薦
                    props({params: {id,name}}) {
                        return {
                            id,
                            name,
                            url: 'https://itclan.cn'
                        }
                    }
                }
            ]
        },
    ]
})

export default router;

讓路由組件接收參數(shù)時,能夠更加的靈活,不需要寫很多重復(fù)this.$route.query或this.$route.params這樣的代碼,這樣的寫法是最強(qiáng)大的