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

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

前言

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

寫死的方式

raw-image


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

raw-image


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


有彈性

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

raw-image
raw-image


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

raw-image


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