此筆記僅以個人清楚理解的方式記錄
前面介紹的方式都是藉由 /:"參數"
的方式傳遞外,當然,我們也可以利用 props
來實作,以下簡單介紹兩種 "寫死" 及 "有彈性" 。
這邊可以看到 /user/:id
路徑下多了個 props
,後面箭頭函式回傳物件,我們就是要用此方式傳遞,接下來切換到組件頁面,如下圖
可以看到接收的方式跟一般路由的方式 this.$route.params."參數"
不同,在當前組件建立 props
,以剛剛 router 內的 props 定義的 key
值來做為接收的參數名稱
,因此剛剛設定為 id 這邊也用 id 接收。
我們更改一下 router 的程式碼,這邊可以看到我們使用 router 變數,每次調用路由時,都會調出一箱相關資訊
我們可以看到 params.id
有我們需要的資料,接下來就可以利用此資料來獲取對應的資訊了,完成如下圖