1. 程式人生 > >Angular學習筆記-路由傳參及重定向路由

Angular學習筆記-路由傳參及重定向路由

路由傳參的三種方式

在查詢引數中傳遞資料

/product?id=1&name=2 => ActivatedRoute.queryParams[id]

在路由路徑中傳遞資料

{path:/product/:id} => /product/1  => ActivatedRoute.params[id]

在路由配置中傳遞資料

{path:/product,component:ProductComponent,data:[{isProd:true}]} => ActivatedRoute.data[0][isProd]

在查詢引數中傳遞資料

step 1 傳一個引數
在這裡插入圖片描述
step 接受引數
在這裡插入圖片描述

在路由路徑中傳遞資料

第一步 修改路由中的path屬性
在這裡插入圖片描述
第二步 修改傳參的值,按照路由的格式
在這裡插入圖片描述
第三步 從url中取引數

在這裡插入圖片描述

在路由配置中傳遞資料

在這裡插入圖片描述

重定向路由

在使用者訪問一個特定的地址時,將其重定向另一個指定的地址
比如當用戶訪問你的網址時www.xusidong.top ,你可以立即路由到一個商品列表的元件上去
在這裡插入圖片描述

或者 你設定一個路由是x,然後你想把路由改為y,但可能使用者已經收藏,這個時候就需要重定向
在這裡插入圖片描述