【Nuxt3】Routing 動態id

重點

• 只要用「中括號」將檔案命名為[id]的形式，nuxt會自動「拆套」這個id出來。
• 當然也可以命名為postId, abc之類的，在取用時只要確認key的名字，拿到正確的資料就行。
• 像是/user-group-[groupName]/[userId].vue這種形式也行正確解析出各自的值

實作

實作一個可以從網址取得id的文章(article)頁面。

• [id].vue

<template>
  <main
    class="flex items-center justify-center flex-col h-[100vh] text-center bg-gradient-to-r from-cyan-50 to-blue-100"
  >
    <h1 class="text-6xl font-bold text-cyan-500">文章</h1>
    <p class="text-xl py-4">Id: {{ id }}</p>
  </main>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "ArticlePage",
  setup() {
		// 用useRoute取得id
    const route = useRoute();
    const id = computed(() => route.params.id);

    return {
      id,
    };
  },
});
</script>

• 放在articles資料夾底下，會被自動解析為articles/[id]這樣的路徑

./pages/
└── articles
		└─ [id].vue

會被編譯成vue-router的這個樣子

{
  "routes": [
    {
      "path": "/articles/:id",
      "component": "pages/articles/[id].vue"
    }
  ]
}

畫面長這樣

---

REF

• https://v3.nuxtjs.org/guide/directory-structure/pages/#dynamic-routes