【Nuxt3】Routing基本

重點

• 每一個資料夾，都是一層/隔開。
• 如果直接放在pages/底下，就是變成根路徑直接存取。
• 直接將檔案丟到pages/資料夾即可，什麼設定都不用做

實作

實作about的頁面

• about.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">About Me</h1>
    <p class="text-xl py-4">Hi 我是企鵝 🐧</p>
  </main>
</template>

• 路徑

./pages/
└── about.vue

會被Nuxt編譯成vue-router那樣的路徑

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

在網址列輸入http://localhost:3000/about就會有畫面了

---

REF

• https://v3.nuxtjs.org/getting-started/routing/#pages