2023 Vue直播班筆記 - 動態路由

此筆記僅以個人清楚理解的方式記錄

前言

假設有一個賣場，裡面有 100 個商品，我們不可能針對它們創 100 對應的路由，因此我們需要一個動態路由，利用路徑帶參數的方式來撈取商品的資訊

環境

一樣先建立好路由及頁面準備

頁面

路由

這邊能知道當我們路徑處於 "/users" 時，會展示 GetUser.vue ，而 GetUser.vue 這邊先以 "https://randomuser.me/api/" 做示範，查看 console 確定是否有成功獲取，並點開來看 seed 獲取的資訊編號

由於該 API 是隨機獲取，如果還想要指定同個資訊獲取的話，可以在請求API上加上參數如圖

動態路由

上述都是一般路由使用方法，以下開始進入主題，我們先建立好動態路由器，很清楚看到後面多了 "/:id" ，這邊 id 可以自行定義，用於匹配 /users 後面的路徑，我們就是要利用該路徑才撈取資訊。

組件內的API也要稍作更改，加上 "this.$route.params.id" 來獲取 /users 後面的路徑，剛剛是設定 id 所以這邊也以 id 來獲取以下為調整後的組件

這樣一來只要 /users 後面路徑帶有參數，我們就能利用該參數來獲取該對應的資訊了。

• joker
• 2024/02/21