在上章所講路由傳遞參數(shù)的方法中，對(duì)于網(wǎng)站開發(fā)而言，不管是 query 傳參還是param 傳參，最終我們都是通過(guò) this.$route 屬性獲取到參數(shù)信息，如： $route.query.name 或$route.params.name

這無(wú)疑意味著組件和路由耦合到了一塊，所有需要獲取參數(shù)值的地方都需要加載 Vue Router，這其實(shí)是很不應(yīng)該的，因此如何實(shí)現(xiàn)組件與路由間的解耦呢？

對(duì)于網(wǎng)站建設(shè)公司來(lái)講，在之前學(xué)習(xí)組件相關(guān)的知識(shí)時(shí)，知道可以通過(guò)組件的 props 選項(xiàng)來(lái)實(shí)現(xiàn)子組件接收父組件傳遞的值。而在 Vue Router 中，可以通過(guò)使用組件的 props 選項(xiàng)來(lái)進(jìn)行組件與路由之間的解耦。下面介紹 props 三種使用情況進(jìn)行解耦

1、設(shè)置 props:true 情況

總結(jié)：

props: [‘id’],

path: ‘/myRouter/:id’

this.$router.push({

path: ‘/myRouter/123’

})

在下面的示例中，在定義路由模板時(shí)，我們通過(guò)指定需要傳遞的參數(shù)為 props 選項(xiàng)中的一個(gè)數(shù)據(jù)項(xiàng)，之后，我們通過(guò)在定義路由規(guī)則時(shí)，指定 props 屬性為 true，即可實(shí)現(xiàn)對(duì)于組件以及 VueRouter 之間的解耦。

結(jié)果：

說(shuō)明： 這里采用 param 傳參的方式進(jìn)行參數(shù)傳遞，而在組件中 我們并沒(méi)有加載 Vue Router 實(shí)例，也完成了對(duì)于路由參數(shù)的獲取。 需要注意的是，該方法實(shí)現(xiàn)組件與路由的解耦，要求路由傳參方式為 一定為 param 方式。針對(duì)定義路由規(guī)則時(shí)，指定 props 屬性為 true 這一種情況， 在 Vue Router 中，我們還可以給路由規(guī)則的 props 屬性定義成一 個(gè)對(duì)象或是函數(shù)。

2、設(shè)置 props 為對(duì)象情況

總結(jié)：

這里有兩種方式傳參，但是這里真正傳過(guò)去的第一種

props: [‘id’]//存放接受傳進(jìn)來(lái)的參數(shù)（組件獲取到的是這里的值）

props: {

id: ‘123’ //將參數(shù)傳進(jìn)去（組件獲取到的是這里的值）

}

path: ‘/myRouter/:id’

this.$router.push({

path: ‘/myRouter/123456’//param 方式傳參,隨便寫參數(shù)，但是必須有

})

這上面的實(shí)際獲取的是123，你傳參123456這里是不會(huì)接受的

結(jié)果：

說(shuō)明：在將路由規(guī)則的 props 定義成對(duì)象后，此時(shí)不管路由參 數(shù)中傳遞是任何值，最終獲取到的都是對(duì)象中的值。同時(shí)，需要注意 的是，props 中的屬性值必須是靜態(tài)的【寫死】。

3、設(shè)置 props 為函數(shù)情況

總結(jié)：

props: [‘id’, ‘name’]

props: (route) => ({

id: route.query.id,//獲取到通過(guò)路由傳遞的參數(shù)，這個(gè)就是動(dòng)態(tài)的

name: ‘zhangsan’//這個(gè)是靜態(tài)的

})

goMethod() { //該方法實(shí)現(xiàn)路由跳轉(zhuǎn)，跳轉(zhuǎn)到 myRouter

this.$router.push({

path: ‘/myRouter?id=123’

}）

}

這個(gè)只是負(fù)責(zé)跳轉(zhuǎn)頁(yè)面順便傳參將id的值傳過(guò)去，上面的name和這里的id傳的方法是不一樣的。

在對(duì)象模式中，我們只能接收靜態(tài)的 props 屬性值，而當(dāng)我們使用函數(shù)模式之后，就可以對(duì)靜態(tài)值做數(shù)據(jù)的進(jìn)一步加工或者是與路由傳參的值進(jìn)行結(jié)合。