2023 Vue直播班筆記 - 動態路由
更新於 2024/05/17閱讀時間約 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 追蹤
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
先前提到 Quasar 的 Dialog Plugin 很好用，再讓我補充一個用法。
※ 什麼是路由？
當我們說「路由」時，可能是在談論路由器（實體設備），也可能是在談論路由（選擇路徑的過程），或者是在談論路徑（資料封包的傳輸路徑）。
路由器 (Router)：這是一種實體設備，負責將資料封包 (Packet) 從一個網路傳送到另一個網路。它的工作方式類似於交通指揮，確保資料封包
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。
架設環境
安裝Visual Studio Code(https://code.visualstudio.com/)
安裝Node.js(https://nodejs.org/en/
vocus 致力於讓創作者透過多元的變現方式展現你的創作動力，除了原有的訂閱、廣告、贊助功能，在去年正式推出了「數位商品」販售功能，讓你的創作能有更多樣化的呈現與變現方式。
為了讓創作者們能更輕鬆地上架數位商品，我們做了以下的功能更新，讓你在上架時更加順暢！
在Vue中，v-for指令是用於渲染列表數據。本文將介紹v-for指令的用法，並提供簡單的範例來幫助你理解如何在你的 Vue 應用中有效地使用v-for指令。
本篇文章介紹了路徑的概念和兩種不同的路徑運用。這些知識對於網頁開發非常重要，能夠幫助網站開發者更好地管理資源文件的位置。文章通過實際例子和相對路徑的範例來解釋這些概念。希望通過這篇文章，讀者能夠清楚地瞭解路徑的概念，並在日後的開發中能夠靈活運用。
指令(Directives)是 Vue 中一個重要的概念，它們提供了一種簡單的方式來操作 DOM 元素。本文將介紹 Vue 的兩個常用指令：v-if 和 v-show，並通過實際範例來解釋它們的不同之處和使用場景。
在 Vue 中，methods和computed是用於定義元件的行為和計算屬性。本文將介紹methods和computed屬性的使用方法和區別，並通過實際範例來幫助你理解。
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
先前提到 Quasar 的 Dialog Plugin 很好用，再讓我補充一個用法。
※ 什麼是路由？
當我們說「路由」時，可能是在談論路由器（實體設備），也可能是在談論路由（選擇路徑的過程），或者是在談論路徑（資料封包的傳輸路徑）。
路由器 (Router)：這是一種實體設備，負責將資料封包 (Packet) 從一個網路傳送到另一個網路。它的工作方式類似於交通指揮，確保資料封包
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。
架設環境
安裝Visual Studio Code(https://code.visualstudio.com/)
安裝Node.js(https://nodejs.org/en/
vocus 致力於讓創作者透過多元的變現方式展現你的創作動力，除了原有的訂閱、廣告、贊助功能，在去年正式推出了「數位商品」販售功能，讓你的創作能有更多樣化的呈現與變現方式。
為了讓創作者們能更輕鬆地上架數位商品，我們做了以下的功能更新，讓你在上架時更加順暢！
在Vue中，v-for指令是用於渲染列表數據。本文將介紹v-for指令的用法，並提供簡單的範例來幫助你理解如何在你的 Vue 應用中有效地使用v-for指令。
本篇文章介紹了路徑的概念和兩種不同的路徑運用。這些知識對於網頁開發非常重要，能夠幫助網站開發者更好地管理資源文件的位置。文章通過實際例子和相對路徑的範例來解釋這些概念。希望通過這篇文章，讀者能夠清楚地瞭解路徑的概念，並在日後的開發中能夠靈活運用。
指令(Directives)是 Vue 中一個重要的概念，它們提供了一種簡單的方式來操作 DOM 元素。本文將介紹 Vue 的兩個常用指令：v-if 和 v-show，並通過實際範例來解釋它們的不同之處和使用場景。
在 Vue 中，methods和computed是用於定義元件的行為和計算屬性。本文將介紹methods和computed屬性的使用方法和區別，並通過實際範例來幫助你理解。