[Day 02] Nuxt 3 頁面與路由 1 (不帶參數版) - 嘗試 30 日寫文充版挑戰

前言

接續昨天的專案，嘗試 30 天 ~~(跳過假日 ლ(́◕◞౪◟◕‵ლ) )~~ 不間斷更新文章的 Day 2

昨天的文內 ([Day 01] 建立第一個 Nuxt 3 專案 - 嘗試 30 日寫文充版挑戰) 有介紹說 Nuxt 3 核心功能擁有 "基於檔案系統" 的文件系統路由器，目錄中的每個 Vue 文件 /pages 都會創建一個相應的 URL（或路由）來顯示文件的內容。通過對每個頁面使用動態導入，Nuxt 利用代碼拆分為請求的路由發送最小所需的程式碼。此文件系統路由器是使用以目錄結構與檔案的命名約定來創建動態和嵌套路由，稱為 "約定式路由"。

建立頁面

Nuxt 3 路由基於 vue-router 並根據文件名從目錄中創建的每個元件生成路由。

/layouts/default.vue 是可以存放 header、footer 等等會固定出現的基底，而 /pages/index.vue 就是我們最主要的主頁顯示內容，/pages/about.vue 則是分頁範例。

在 /layouts/default.vue 頁面內我這邊放下面範例來介紹： /pages/index.vue 經過 Nuxt 3 自動產生路由配置後，"/" 就是對應到主頁的頁面，而 /pages/about.vue 對應的就是 "/about"， <slot /> 代表的則是 Index 與 About 所顯示的區塊。

<template>
  <div>
    123
    <br />
    <NuxtLink to="/">Index</NuxtLink>
    <br />
    <NuxtLink to="/about">About</NuxtLink>
    <slot />
  </div>
</template>

畫面如下圖，本地開發服務器的主頁將會顯示在上方代碼 slot 的位置。