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

Posted on by

前言

在Vue項目裡,去實現左側菜單邊欄多級內容的展示,導航的切換,以及內容鏈接的跳轉等,用的都是前端路由vue-router,它的重要性,不可言喻

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

方式1-使用query方式

這裡循環遍歷一個列表為例,query的方式,跳轉的url後面攜帶的一些具體的參數,比如下面的攜帶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>

以上對象的寫法,相比於字符串的寫法,雖然麻煩瞭一點,但是比較清晰,當傳入的參數比較多時,比較適合,而且也易維護

如下是完整的組件代碼,定義瞭一個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資源網',
                        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: '發卡商城',
                        url: 'https://faka.itclan.cn'
                    },
                    {
                        id: '5',
                        name: '愛客來科技',
                        url: 'https://aikelaidev.cn'
                    }
                ]
            }
        }
    }
</script>

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

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

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

命名路由

在路由跳轉時,to後面跟著路徑這種寫法是沒什麼問題的,但會發現,也很麻煩,有時,通過一個名稱來標識一個路由,就會顯得更方便一些的,特別是在鏈接一個路由,或是執行一些跳轉的時候,你可以在創建Router實例的時候

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

import VueRouter from "vue-router"

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

// 創建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;

那麼另一邊路由跳轉時,直接使用name就可以瞭,不用寫具體的路徑path瞭的,如下所示

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

命名路由,其實就是可以簡化路由的跳轉

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

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

方式2-路由的params參數

這個路由的params參數,簡單一點來說就是路徑的的參數,並不是像query一樣那麼直觀,而是如下所示,路徑最後面的/1/IT資源網是params參數,它是動態的

http://localhost:8080/#/new/detail/1/IT資源網

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

對於所有id各不同的詳情頁,都要使用這個組件來渲染,那麼在定義路由規則,配置時,就可以使用動態路徑參數；來實現,如下所示

import VueRouter from "vue-router"

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

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

export default router;

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

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

兩種寫法:歸納一下

<!--跳轉並攜帶params參數,to的字符串寫法-->
<router-link :to="/new/detail/1/IT資源網">新聞</router-link>
<router-link :to="{name: 'detailPage',params: {id:1,name:'IT資源網'}}">

特別註意: 路由攜帶params參數時,若使用to的對象寫法,則不能使用path配置項,必須使用name配置

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

query與params的區別

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

路由的props配置

讓路由組件更方便的收到參數

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

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

路由配置的佈爾模式

當 props 設置為 true 時，route.params 將被設置為組件的 props 它是在對應的路由組件配置,設置props:true,如下所示

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

export default router;

那麼在接收使用參數的組件,通過props: ['參數1','參數2']

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

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

路由配置的對象模式

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

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

在路由組件接收使用參數,依舊使用props:['url']進行接收

註意的是:當props為對象時,那麼動態的參數,就失效瞭,隻有靜態參數才有用

所以接下來介紹的路由函數模式,就可以兼顧動態的路由參數與靜態參數的結合

路由配置函數模式

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

這種方式很好的解決瞭路由組件傳參中對象模式的弊端,可以兼顧靜態參數與動態參數

如下所示

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

export default router;

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

總結

關於Vue中的路由傳參以及props的配置就介紹到這裡,其中傳參有兩種方式,一種是query,另一種就是params,前者通過url後面跟著參數

,而通過this.$route.query進行接收參數,後者,是在路由規則配置中的path路徑中,以冒號:形式動態路由參數的配置,通過this.$route.params方式進行接收參數

兩種方式各有特點

光看官方文檔是理解不瞭的,這個必須得自己動手寫代碼測試,才能知道這兩種方式的區別,路由的傳參是一個非常重要的知識點

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

到此這篇關於vuejs路由的傳參及路由props配置的文章就介紹到這瞭,更多相關vuejs路由傳參及props配置內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：