一、使用router-link進行路由導(dǎo)航，傳遞參數(shù)

=> 父組件中：使用<router-link to="/需要跳轉(zhuǎn)的路由路徑/需要傳遞的參數(shù)"></router-link>標(biāo)簽進行導(dǎo)航

child是子頁面路由路徑，123是需要傳遞的參數(shù)

=>子組件中：使用this.$route.params.num來接收路由參數(shù)

此時，頁面上渲染出路由傳遞過來的參數(shù)num，呈現(xiàn)123

=>路由配置文件中：

num用來為參數(shù)占位

=>地址欄中：

在地址欄中顯示傳遞的參數(shù)num,即123, ，刷新頁面，參數(shù)不丟失

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

=> 父組件中：

模板渲染中調(diào)用函數(shù)，傳遞參數(shù)

=> 子組件中：

仍然使用 this.$route.params.id? 獲取參數(shù)

=> 路由配置文件中：

id用來為參數(shù)占位

=> 地址欄中：

在地址欄中顯示傳遞的參數(shù)id, ，刷新頁面，參數(shù)不丟失

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

=> 父組件中：

使用name來匹配路由

=> 子組件中：

依然使用 this.$route.params.id? 接收參數(shù)

=> 路由配置問件中：

使用name匹配

=> 地址欄中：

地址欄中不顯示參數(shù)，刷新頁面，參數(shù)丟失

四、使用path來匹配路由，然后通過query來傳遞參數(shù)，這種情況下 query傳遞的參數(shù)會顯示在url后面?id=？

=> 父組件中：

使用query來傳遞參數(shù)

=> 子組件中：

使用 this.$route.query.id來接收參數(shù)

=> 路由配置文件中：

=> 地址欄中：

參數(shù)顯示在地址欄中，刷新頁面參數(shù)不丟失

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

總結(jié)：

? ? 1、 this.$router.push進行編程式路由跳轉(zhuǎn)

? ? 2、 router-link 進行頁面按鈕式路由跳轉(zhuǎn)

? ? 3、 this.$route.params獲取路由傳遞參數(shù)

? ? 4、this.$route.query獲取路由傳遞參數(shù)

? ? 5、 params 和 query 都是傳遞參數(shù)的，params不會在url上面出現(xiàn)，并且params參數(shù)是路由的一部分，是一定要存在的 query則是我們通常看到的url后面的跟在？后面的顯示參數(shù)