2023 Vue直播班筆記 - 動態路由
閱讀時間約 1 分鐘
此筆記僅以個人清楚理解的方式記錄
前言
假設有一個賣場，裡面有 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
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
從 Vue 班畢業已經 1 個多月，最近也轉職成功，終於有機會把這段歷程記錄下來，當作一個里程碑。此次參加 Vue 班，心境上最大的不同，大概是知道自己即將在完課後，踏上求職道路。所以如果能在課堂期間 2 個月內完成求職作品，我就能提早出發。
▍學習狀況
雖然先前有稍微玩過 Vue，但也早已
這些那些關於即將成為過去的那一年
在這個名之為我的小宇宙
泛起過一片漣漪
和其他生命的交會與告別
或久別重逢
或不如歸去
留下些什麼
我們就逐漸長成那個模樣
記憶的刻痕是我們選擇的事實
似真還假
孰是孰非
有何干係
物質構築的既成事實
缺席的不在場證明
幫大家標示容易走錯的幾個路口，希望可以幫助大家的旅途順利~ 嘗試用圖文方式記錄遊記，好像讀起來更生動了。
為什麼會參加這個課程
2022年是個不一樣的年，因為當初自學由設計轉前端工程師、一路上跌跌撞撞因為想要把基底打穩所以今年下定了決心從2022切版班、Js直播班、一路跟到目前2022秋季Vue直播班。
Vue直播班的心得
前兩週其實都還跟得上，但到了第三週對我而言確實感覺有些難了啊～正在心裡徬徨第三週
新年一年新的開始，最近事情太多，本想說寫點什麼的...但最近真的工作遇到些瓶頸，剛好在年底把這些不順遂的事情一併都處理掉了，稍微有點時間可以好好的敘述一下最近發生的事情。是這樣的，我前份工作傳統產業做得不太開心，本人的職業是平面設計師，據大家的認知傳產從上到下都是親戚接管事業，當然我的工作也不例外，
欲說還休，欲說還休，卻道天涼好個秋
想來也到了「欲說還休」的時候了。
是年紀的增長多了顧慮，還是收斂了自己的負面情緒，或者，只是懶了，我在也不像從前能在FB上po出長文。不管當下的情緒多麼澎派，多想要發表言論，回到家了，坐在電腦前面，就沒了發文的欲望了。
其實也有點擔心，難道已經被速食文化變得淺薄了
2023
1.我希望我可以自由的工作、開心的工作、利用我的工作能力我自己賺到生活費。
2.我希望我可以有車子、讓我自由的旅行、享受大自然、我並不是想要在家裡放一台車、而是可以讓我隨時隨時都有一台車。
3.我希望我可以去一些國家旅行想去泰國、加拿大，芬蘭、歐洲。
4.我想瘦到我想要的體重。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
從 Vue 班畢業已經 1 個多月，最近也轉職成功，終於有機會把這段歷程記錄下來，當作一個里程碑。此次參加 Vue 班，心境上最大的不同，大概是知道自己即將在完課後，踏上求職道路。所以如果能在課堂期間 2 個月內完成求職作品，我就能提早出發。
▍學習狀況
雖然先前有稍微玩過 Vue，但也早已
這些那些關於即將成為過去的那一年
在這個名之為我的小宇宙
泛起過一片漣漪
和其他生命的交會與告別
或久別重逢
或不如歸去
留下些什麼
我們就逐漸長成那個模樣
記憶的刻痕是我們選擇的事實
似真還假
孰是孰非
有何干係
物質構築的既成事實
缺席的不在場證明
幫大家標示容易走錯的幾個路口，希望可以幫助大家的旅途順利~ 嘗試用圖文方式記錄遊記，好像讀起來更生動了。
為什麼會參加這個課程
2022年是個不一樣的年，因為當初自學由設計轉前端工程師、一路上跌跌撞撞因為想要把基底打穩所以今年下定了決心從2022切版班、Js直播班、一路跟到目前2022秋季Vue直播班。
Vue直播班的心得
前兩週其實都還跟得上，但到了第三週對我而言確實感覺有些難了啊～正在心裡徬徨第三週
新年一年新的開始，最近事情太多，本想說寫點什麼的...但最近真的工作遇到些瓶頸，剛好在年底把這些不順遂的事情一併都處理掉了，稍微有點時間可以好好的敘述一下最近發生的事情。是這樣的，我前份工作傳統產業做得不太開心，本人的職業是平面設計師，據大家的認知傳產從上到下都是親戚接管事業，當然我的工作也不例外，
欲說還休，欲說還休，卻道天涼好個秋
想來也到了「欲說還休」的時候了。
是年紀的增長多了顧慮，還是收斂了自己的負面情緒，或者，只是懶了，我在也不像從前能在FB上po出長文。不管當下的情緒多麼澎派，多想要發表言論，回到家了，坐在電腦前面，就沒了發文的欲望了。
其實也有點擔心，難道已經被速食文化變得淺薄了
2023
1.我希望我可以自由的工作、開心的工作、利用我的工作能力我自己賺到生活費。
2.我希望我可以有車子、讓我自由的旅行、享受大自然、我並不是想要在家裡放一台車、而是可以讓我隨時隨時都有一台車。
3.我希望我可以去一些國家旅行想去泰國、加拿大，芬蘭、歐洲。
4.我想瘦到我想要的體重。