欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2022年07月21日 09:01:02   作者：itclanCoder  
最近在學(xué)習(xí)vue router的傳參,所以下面這篇文章主要給大家介紹了關(guān)于vuejs路由的傳參及路由props配置的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

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

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

方式1-使用query方式

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

  • to字符串的寫(xiě)法
<router-link :to="`/new/detail?id=${item.id}&name=${item.name}`">{{item.name}}</router-link>
  • to對(duì)象的寫(xiě)法
 <router-link :to="
    {
      path: '/new/detail',
      query:{
        id: item.id,
        name: item.name
    }
}">{{item.name}}
</router-link>

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

如下是完整的組件代碼,定義了一個(gè)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: '客來(lái)影視TV',
                        url: 'https://video.itclan.cn'
                    },
                    {
                        id: '4',
                        name: '發(fā)卡商城',
                        url: 'https://faka.itclan.cn'
                    },
                    {
                        id: '5',
                        name: '愛(ài)客來(lái)科技',
                        url: 'https://aikelaidev.cn'
                    }
                ]
            }
        }
    }
</script>

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

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

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

命名路由

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

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

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示例對(duì)象
const router  = new VueRouter({
    routes: [
        {
            name: 'new',
            path: '/new',
            component: New,
            children: [
                {
                    name: "detailPage",   // 用name命名路由的名稱(chēng)
                    path: 'detail',
                    component: Detail
                }
            ]
        },
        {
            path: '/about',
            component: About
        }
    ]
})

export default router;

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

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

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

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

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

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

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

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

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

對(duì)于所有id各不同的詳情頁(yè),都要使用這個(gè)組件來(lái)渲染,那么在定義路由規(guī)則,配置時(shí),就可以使用動(dòng)態(tài)路徑參數(shù)；來(lái)實(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示例對(duì)象
const router  = new VueRouter({
    routes: [
        {
            name: 'new',
            path: '/new',
            component: New,
            children: [
                {
                    name: "detailPage",   // 用name命名路由的名稱(chēng)
                    // path: 'detail',   // 非動(dòng)態(tài)路由設(shè)置
                    // 動(dòng)態(tài)路徑參數(shù)，以冒號(hào)開(kāi)頭:參數(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>

或如下對(duì)象的寫(xiě)法

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

兩種寫(xiě)法:歸納一下

<!--跳轉(zhuǎn)并攜帶params參數(shù),to的字符串寫(xiě)法-->
<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ù)時(shí),若使用to的對(duì)象寫(xiě)法,則不能使用path配置項(xiàng),必須使用name配置

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

query與params的區(qū)別

  • params傳參,必須使用命名路由方式傳參
<router-link :to="
{
    path: '/new/detail', // 如果是params,動(dòng)態(tài)路由方式,這種方式是不生效的
    params: {
    id: item.id,
    name: item.name
    }
}
">{{item.name}}</router-link>
  • params傳參,不會(huì)顯示在地止欄上,會(huì)保存在內(nèi)存中,刷新會(huì)丟失，可以配合本地存儲(chǔ)localStorage進(jìn)行使用
  • query的參數(shù)會(huì)顯示在地止欄上,不會(huì)丟失

路由的props配置

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

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

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

路由配置的布爾模式

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

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

export default router;

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

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

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

路由配置的對(duì)象模式

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

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

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

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

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

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

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

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

如下所示

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

export default router;

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

總結(jié)

關(guān)于Vue中的路由傳參以及props的配置就介紹到這里,其中傳參有兩種方式,一種是query,另一種就是params,前者通過(guò)url后面跟著參數(shù)

,而通過(guò)this.$route.query進(jìn)行接收參數(shù),后者,是在路由規(guī)則配置中的path路徑中,以冒號(hào):形式動(dòng)態(tài)路由參數(shù)的配置,通過(guò)this.$route.params方式進(jìn)行接收參數(shù)

兩種方式各有特點(diǎn)

光看官方文檔是理解不了的,這個(gè)必須得自己動(dòng)手寫(xiě)代碼測(cè)試,才能知道這兩種方式的區(qū)別,路由的傳參是一個(gè)非常重要的知識(shí)點(diǎn)

而路由組件的props配置則是更好的接收參數(shù),讓接收參數(shù)更加的靈活

到此這篇關(guān)于vuejs路由的傳參及路由props配置的文章就介紹到這了,更多相關(guān)vuejs路由傳參及props配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論