跳到主要內容
前端開發

Nuxt 動態路由:程式式與宣告式兩種轉址方式

記錄 Nuxt 2 以 this.$router.push 與 nuxt-link 前往動態路由的兩種寫法。

W

這邊記錄 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;程式式、宣告式導航以及 paramsqueryhash 的概念仍在,但自動產生的路由名稱要以目前專案為準。

分享這篇