vue 之路由跳轉有:
1、 this.$router.push進行編程式路由跳轉
2、 router-link 進行頁面按鈕式路由跳轉
vue 之路由傳參有:
1、 this.$route.params獲取路由傳遞參數
2、this.$route.query獲取路由傳遞參數
區別: params 和 query 都是傳遞參數的,params不會在url上面出現,並且params參數是路由的一部分,是一定要存在的 query則是我們通常看到的url后面的跟在?后面的顯示參數
vue 之路由跳轉及傳參示例:
一.使用router-link進行路由導航,傳遞參數:
父組件:
子組件中:使用this.$route.params.num來接收路由參數

路由配置文件中:在路徑綁定num參數

地址欄中:
二、直接調用$router.push 實現攜帶參數的跳轉:
父組件中:模板渲染中調用函數,傳遞參數

子組件中:使用 this.$route.params.id 獲取參數

路由配置文件中:id用來為參數占位

地址欄中:

三、通過路由屬性中的name來確定匹配的路由,通過params來傳遞參數:使用name來匹配路由
子組件中:依然使用 this.$route.params.id 接收參數

路由配置文件中: 使用name配置

地址欄中:不顯示參數

四、使用path來匹配路由,然后通過query來傳遞參數,這種情況下 query傳遞的參數會顯示在url后面?id=?
父組件中:使用query來傳遞參數

子組件中:使用 this.$route.query.id來接收參數

路由配置文件中:

地址欄中:
