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會員
21內容數
是一隻喜愛前端勇往直前的霹靂酷樂貓
留言0
查看全部
發表第一個留言支持創作者!
Joker Cat 的其他內容
Vue Router 動態路由,假設有一個賣場,裡面有 100 個商品,我們不可能針對它們創 100 對應的路由,因此我們需要一個動態路由,利用"路徑帶參數"的方式來撈取商品的資訊。
Vue Router 及 具名視圖,擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合,有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩,而 Vue Router 完美的解決了這棘手的問題,且能客製頁面想要呈現的擺飾。
這系列是我在 2023 六角學院 Vue作品實戰班的筆記,筆記以本人理解的方式記錄。此篇主題為 Slot Props 進階應用 ,其中包含單筆資料、多筆資料。
這系列是我在 2023 六角學院 Vue作品實戰班的筆記,筆記以本人理解的方式記錄。此篇主題為 Slot插槽 ,其中包含默認、具名、語法糖。
Vue Router 動態路由,假設有一個賣場,裡面有 100 個商品,我們不可能針對它們創 100 對應的路由,因此我們需要一個動態路由,利用"路徑帶參數"的方式來撈取商品的資訊。
Vue Router 及 具名視圖,擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合,有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩,而 Vue Router 完美的解決了這棘手的問題,且能客製頁面想要呈現的擺飾。
這系列是我在 2023 六角學院 Vue作品實戰班的筆記,筆記以本人理解的方式記錄。此篇主題為 Slot Props 進階應用 ,其中包含單筆資料、多筆資料。
這系列是我在 2023 六角學院 Vue作品實戰班的筆記,筆記以本人理解的方式記錄。此篇主題為 Slot插槽 ,其中包含默認、具名、語法糖。
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
從 Vue 班畢業已經 1 個多月,最近也轉職成功,終於有機會把這段歷程記錄下來,當作一個里程碑。此次參加 Vue 班,心境上最大的不同,大概是知道自己即將在完課後,踏上求職道路。所以如果能在課堂期間 2 個月內完成求職作品,我就能提早出發。 ▍學習狀況 雖然先前有稍微玩過 Vue,但也早已
Thumbnail
這一年讓我知道了沒有完美的人事物 我也是一個充滿缺失的個體
Thumbnail
這些那些關於即將成為過去的那一年 在這個名之為我的小宇宙 泛起過一片漣漪 和其他生命的交會與告別 或久別重逢 或不如歸去 留下些什麼 我們就逐漸長成那個模樣 記憶的刻痕是我們選擇的事實 似真還假 孰是孰非 有何干係 物質構築的既成事實 缺席的不在場證明
Thumbnail
幫大家標示容易走錯的幾個路口,希望可以幫助大家的旅途順利~ 嘗試用圖文方式記錄遊記,好像讀起來更生動了。
Thumbnail
為什麼會參加這個課程 2022年是個不一樣的年,因為當初自學由設計轉前端工程師、一路上跌跌撞撞因為想要把基底打穩所以今年下定了決心從2022切版班、Js直播班、一路跟到目前2022秋季Vue直播班。 Vue直播班的心得 前兩週其實都還跟得上,但到了第三週對我而言確實感覺有些難了啊~正在心裡徬徨第三週
Thumbnail
新年一年新的開始,最近事情太多,本想說寫點什麼的...但最近真的工作遇到些瓶頸,剛好在年底把這些不順遂的事情一併都處理掉了,稍微有點時間可以好好的敘述一下最近發生的事情。是這樣的,我前份工作傳統產業做得不太開心,本人的職業是平面設計師,據大家的認知傳產從上到下都是親戚接管事業,當然我的工作也不例外,
Thumbnail
欲說還休,欲說還休,卻道天涼好個秋 想來也到了「欲說還休」的時候了。 是年紀的增長多了顧慮,還是收斂了自己的負面情緒,或者,只是懶了,我在也不像從前能在FB上po出長文。不管當下的情緒多麼澎派,多想要發表言論,回到家了,坐在電腦前面,就沒了發文的欲望了。 其實也有點擔心,難道已經被速食文化變得淺薄了
Thumbnail
新的一年即將開始,人類這種生物很奇妙,喜歡有一種重新啟動的感覺。
Thumbnail
2023 1.我希望我可以自由的工作、開心的工作、利用我的工作能力我自己賺到生活費。 2.我希望我可以有車子、讓我自由的旅行、享受大自然、我並不是想要在家裡放一台車、而是可以讓我隨時隨時都有一台車。 3.我希望我可以去一些國家旅行想去泰國、加拿大,芬蘭、歐洲。 4.我想瘦到我想要的體重。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
從 Vue 班畢業已經 1 個多月,最近也轉職成功,終於有機會把這段歷程記錄下來,當作一個里程碑。此次參加 Vue 班,心境上最大的不同,大概是知道自己即將在完課後,踏上求職道路。所以如果能在課堂期間 2 個月內完成求職作品,我就能提早出發。 ▍學習狀況 雖然先前有稍微玩過 Vue,但也早已
Thumbnail
這一年讓我知道了沒有完美的人事物 我也是一個充滿缺失的個體
Thumbnail
這些那些關於即將成為過去的那一年 在這個名之為我的小宇宙 泛起過一片漣漪 和其他生命的交會與告別 或久別重逢 或不如歸去 留下些什麼 我們就逐漸長成那個模樣 記憶的刻痕是我們選擇的事實 似真還假 孰是孰非 有何干係 物質構築的既成事實 缺席的不在場證明
Thumbnail
幫大家標示容易走錯的幾個路口,希望可以幫助大家的旅途順利~ 嘗試用圖文方式記錄遊記,好像讀起來更生動了。
Thumbnail
為什麼會參加這個課程 2022年是個不一樣的年,因為當初自學由設計轉前端工程師、一路上跌跌撞撞因為想要把基底打穩所以今年下定了決心從2022切版班、Js直播班、一路跟到目前2022秋季Vue直播班。 Vue直播班的心得 前兩週其實都還跟得上,但到了第三週對我而言確實感覺有些難了啊~正在心裡徬徨第三週
Thumbnail
新年一年新的開始,最近事情太多,本想說寫點什麼的...但最近真的工作遇到些瓶頸,剛好在年底把這些不順遂的事情一併都處理掉了,稍微有點時間可以好好的敘述一下最近發生的事情。是這樣的,我前份工作傳統產業做得不太開心,本人的職業是平面設計師,據大家的認知傳產從上到下都是親戚接管事業,當然我的工作也不例外,
Thumbnail
欲說還休,欲說還休,卻道天涼好個秋 想來也到了「欲說還休」的時候了。 是年紀的增長多了顧慮,還是收斂了自己的負面情緒,或者,只是懶了,我在也不像從前能在FB上po出長文。不管當下的情緒多麼澎派,多想要發表言論,回到家了,坐在電腦前面,就沒了發文的欲望了。 其實也有點擔心,難道已經被速食文化變得淺薄了
Thumbnail
新的一年即將開始,人類這種生物很奇妙,喜歡有一種重新啟動的感覺。
Thumbnail
2023 1.我希望我可以自由的工作、開心的工作、利用我的工作能力我自己賺到生活費。 2.我希望我可以有車子、讓我自由的旅行、享受大自然、我並不是想要在家裡放一台車、而是可以讓我隨時隨時都有一台車。 3.我希望我可以去一些國家旅行想去泰國、加拿大,芬蘭、歐洲。 4.我想瘦到我想要的體重。