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

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

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

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

總結(jié)：

props: [‘id’],

path: ‘/myRouter/:id’

this.$router.push({

path: ‘/myRouter/123’

})

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

結(jié)果：

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

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

總結(jié)：

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

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

props: {

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

}

path: ‘/myRouter/:id’

this.$router.push({

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

})

這上面的實際獲取的是123，你傳參123456這里是不會接受的

結(jié)果：

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

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

總結(jié)：

props: [‘id’, ‘name’]

props: (route) => ({

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

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

})

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

this.$router.push({

path: ‘/myRouter?id=123’

}）

}

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

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