最近在項目中遇到了很多頁面跳轉(zhuǎn)攜帶參數(shù)的處理，就在這里做個小小的總結(jié)，下面來看一下常見的三種傳參方式

有如下場景，點擊封裝好的公共組件跳轉(zhuǎn)到對應的詳情頁面

<businessTable @click.native="projectDetail(item)"></businessTable>?

一? 直接調(diào)用$router.push 實現(xiàn)攜帶參數(shù)的跳轉(zhuǎn)

在父組件中寫點擊跳轉(zhuǎn)方法如下

?在路由配置頁面配置路由如下

要注意的一點是需要在path中添加/:item來對應 $router.push 中path攜帶的參數(shù)。

在子組件中獲取傳遞的參數(shù)值。

二?通過路由屬性中的name來確定匹配的路由，通過params來傳遞參數(shù)。

在父組件中寫點擊跳轉(zhuǎn)方法如下

在路由頁面配置路由如下

在子組件中獲取傳遞的參數(shù)值。

三?使用path來匹配路由，然后通過query來傳遞參數(shù)

在父組件中寫點擊跳轉(zhuǎn)方法如下

這種情況下 query傳遞的參數(shù)會顯示在url后面?item=？

在路由頁面配置路由如下

在子組件中獲取傳遞的參數(shù)值。

這里要特別注意 在子組件中 獲取參數(shù)的時候是$route.params 而不是

$router 這很重要