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

閱讀時間約 1 分鐘
此筆記僅以個人清楚理解的方式記錄

前言

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


環境

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

頁面

raw-image

路由

raw-image


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

raw-image


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


動態路由

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

raw-image


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

raw-image


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


  • joker
  • 2024/02/21
2會員
19內容數
是一隻喜愛前端勇往直前的霹靂酷樂貓
留言0
查看全部
發表第一個留言支持創作者!