這邊記錄 Nuxt 2 動態路由的使用方式。假設用 v-for 跑出一份帶有 ID 的資料,可以用程式式或宣告式寫法轉向對應頁面。
程式式
使用 this.$router.push():
this.$router.push({
name: "courses-course_id-main",
params: { course_id: course.id },
query: { lesson_id: lesson.id },
hash: "#ratings",
});
宣告式
取得 ID 與參數後,使用 nuxt-link:
<nuxt-link
:to="{
name: 'courses-course_id-main',
params: { course_id: course.id },
query: { lesson_id: lesson.id },
hash: '#ratings',
}"
>
test
</nuxt-link>
其中 hash 可以作為錨點使用。
2026 年後記
這是 Nuxt 2 的命名路由與元件寫法。Nuxt 3 使用 <NuxtLink> 與 Vue Router 4;程式式、宣告式導航以及 params/query/hash 的概念仍在,但自動產生的路由名稱要以目前專案為準。