Nuxt 3 動態路由

閱讀時間約 1 分鐘
  • 比如點了商品詳細資料,會導到商品詳細資料頁面並帶上id,或者點了商品分類,將類別id帶過去抓出該類別的商品資料等等。
巢狀路由用法:

同一層page帶動態參數用法:

  • 跳轉頁面可直接使用nuxt-link
<NuxtLink to="/product-123">product</NuxtLink>
  • 若是要用類似v-to的用法來存取v-for的變數,要用:to
<NuxtLink :to="'/product/category/' + main.id">product</NuxtLink>
本筆記參考:
  1. https://ithelp.ithome.com.tw/articles/10293441
  2. https://ithelp.ithome.com.tw/articles/10208046
  3. https://stackoverflow.com/questions/59841669/how-can-i-use-a-v-for-value-in-to-nuxt-link
即將進入廣告,捲動後可繼續閱讀
為什麼會看到廣告
avatar-img
21會員
161內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Vic Lin的沙龍 的其他內容
位址登錄->網路資料夾中,輸入NAS資料夾路徑、NAS用戶帳密: 比如這邊我是NAS中有個scanner的user,專門用來掃描文件用的。
首先要先設定兩步驟驗證: 2. 設定完就會出現應用程式密碼: 選取應用程式: 郵件 因為是印表機要用的,所以選取裝置選其他(自訂名稱): 按下產生後,即會產生一組應用程式密碼: 接著到印表機設定後台,找到SMTP設定: 主要伺服器: smtp.gmail.com 連接埠號碼: 465 傳送方位址/
管理Google帳戶 -> 資料和隱私權: 下載您的資料 會進到Google匯出頁面: 選取Gmail按下一步: 選擇轉移目標: 我這邊選傳送到email->建立匯出作業 等完成後,會收到email: 收到的mail: 下載後的zip解壓縮,裡面有個.mbox檔案,這種檔案格式可用Mbox View
1. 開啟本機群組原則編輯器: 搜尋gpedit.msc 2. 路徑: 電腦設定 > 系統管理範本 > Windows 元件 > Windows Update > 管理使用者體驗 > 設定自動更新 3. 設定為已停用: 套用->確定 這樣就完成了,之後想更新系統,就要到「設定」的「Windows U
安裝Node.js 使用nuxi建立nuxt 3 專案: 3. 進入專案目錄後,安裝相關套件: 4. 啟動nuxt: 跟Nuxt 2用法一樣,新增一個元件放到components資料夾中,可以直接引用: pages用法也一樣,這邊把app.vue改放到pages下,改成index.vue,然後新增一
1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西,按照需求選擇即可: 3. 執行 打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。 假設在pages資料夾下新增一個如下內容的a
位址登錄->網路資料夾中,輸入NAS資料夾路徑、NAS用戶帳密: 比如這邊我是NAS中有個scanner的user,專門用來掃描文件用的。
首先要先設定兩步驟驗證: 2. 設定完就會出現應用程式密碼: 選取應用程式: 郵件 因為是印表機要用的,所以選取裝置選其他(自訂名稱): 按下產生後,即會產生一組應用程式密碼: 接著到印表機設定後台,找到SMTP設定: 主要伺服器: smtp.gmail.com 連接埠號碼: 465 傳送方位址/
管理Google帳戶 -> 資料和隱私權: 下載您的資料 會進到Google匯出頁面: 選取Gmail按下一步: 選擇轉移目標: 我這邊選傳送到email->建立匯出作業 等完成後,會收到email: 收到的mail: 下載後的zip解壓縮,裡面有個.mbox檔案,這種檔案格式可用Mbox View
1. 開啟本機群組原則編輯器: 搜尋gpedit.msc 2. 路徑: 電腦設定 > 系統管理範本 > Windows 元件 > Windows Update > 管理使用者體驗 > 設定自動更新 3. 設定為已停用: 套用->確定 這樣就完成了,之後想更新系統,就要到「設定」的「Windows U
安裝Node.js 使用nuxi建立nuxt 3 專案: 3. 進入專案目錄後,安裝相關套件: 4. 啟動nuxt: 跟Nuxt 2用法一樣,新增一個元件放到components資料夾中,可以直接引用: pages用法也一樣,這邊把app.vue改放到pages下,改成index.vue,然後新增一
1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西,按照需求選擇即可: 3. 執行 打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。 假設在pages資料夾下新增一個如下內容的a
你可能也想看
Google News 追蹤
Thumbnail
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上,即使在不同組件也能把A組件內的部分畫面,展現在B組件上,以下方程式舉例。
Thumbnail
這次要講的是 $route 及 $router 的區別,看似相似的兩個東西,其實應用時機也大不相同,以下以簡單的幾個例子舉例。
Thumbnail
2023 Vue直播班筆記 - 動態路由Props,接續之前的一般動態路由。分為 "寫死" 及 "彈性" 兩種。
Thumbnail
Vue Router 動態路由,假設有一個賣場,裡面有 100 個商品,我們不可能針對它們創 100 對應的路由,因此我們需要一個動態路由,利用"路徑帶參數"的方式來撈取商品的資訊。
Thumbnail
v-model 指令是 Vue 中一個非常重要的功能,它實現了表單輸入和應用狀態之間的雙向綁定。本文將介紹如何使用 v-model 指令。
Thumbnail
在Vue中,v-for指令是用於渲染列表數據。本文將介紹v-for指令的用法,並提供簡單的範例來幫助你理解如何在你的 Vue 應用中有效地使用v-for指令。
Thumbnail
env 環境變數的設定,通常是為為了 server 而設定的,能快速的切換狀態,但現在的網頁開始,前端的範圍逐漸往後端靠近,所以在設定,也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作,分享此內容 前端架構 最常見的 front 架構,就是把專案 buil
Thumbnail
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上,即使在不同組件也能把A組件內的部分畫面,展現在B組件上,以下方程式舉例。
Thumbnail
這次要講的是 $route 及 $router 的區別,看似相似的兩個東西,其實應用時機也大不相同,以下以簡單的幾個例子舉例。
Thumbnail
2023 Vue直播班筆記 - 動態路由Props,接續之前的一般動態路由。分為 "寫死" 及 "彈性" 兩種。
Thumbnail
Vue Router 動態路由,假設有一個賣場,裡面有 100 個商品,我們不可能針對它們創 100 對應的路由,因此我們需要一個動態路由,利用"路徑帶參數"的方式來撈取商品的資訊。
Thumbnail
v-model 指令是 Vue 中一個非常重要的功能,它實現了表單輸入和應用狀態之間的雙向綁定。本文將介紹如何使用 v-model 指令。
Thumbnail
在Vue中,v-for指令是用於渲染列表數據。本文將介紹v-for指令的用法,並提供簡單的範例來幫助你理解如何在你的 Vue 應用中有效地使用v-for指令。
Thumbnail
env 環境變數的設定,通常是為為了 server 而設定的,能快速的切換狀態,但現在的網頁開始,前端的範圍逐漸往後端靠近,所以在設定,也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作,分享此內容 前端架構 最常見的 front 架構,就是把專案 buil