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

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

前言

前面介紹的方式都是藉由 /:"參數" 的方式傳遞外，當然，我們也可以利用 props 來實作，以下簡單介紹兩種 "寫死" 及 "有彈性" 。

寫死的方式

這邊可以看到 /user/:id 路徑下多了個 props ，後面箭頭函式回傳物件，我們就是要用此方式傳遞，接下來切換到組件頁面，如下圖

可以看到接收的方式跟一般路由的方式 this.$route.params."參數" 不同，在當前組件建立 props ，以剛剛 router 內的 props 定義的 key 值來做為接收的參數名稱，因此剛剛設定為 id 這邊也用 id 接收。

有彈性

我們更改一下 router 的程式碼，這邊可以看到我們使用 router 變數，每次調用路由時，都會調出一箱相關資訊

我們可以看到 params.id 有我們需要的資料，接下來就可以利用此資料來獲取對應的資訊了，完成如下圖

• joker
• 2024/02/21