# [Nuxt] Nuxt 3 - Pages & Routing

###### tags: `Nuxt`

* `pages/` 內的 component 自動產生路由，不需要個別設定
* 檔名（小寫）等同路徑名

## Components
| | Nuxt 3 | Vue Router |
| --------------------- | -------------------- | ------------- |
| 換頁的進入點 | `<slot>、<NuxtLayout>` | `<router-view>` |
| 嵌套路由換頁的進入點 | `<NuxtPage>` | `<router-view>` |
| 換頁的超連結 | `<NuxtLink>` | `<router-link>` |
* `<slot>`: 在 `layouts/` 內使用
* [官方文件](https://nuxt.com/docs/guide/directory-structure/layouts#enabling-the-default-layout "layouts/ · Nuxt Directory Structure")
* `<NuxtLayout>`: 在 `app.vue`、`error.vue`、`pages/` 內使用
* [官方文件](https://nuxt.com/docs/api/components/nuxt-layout "<NuxtLayout> · Nuxt Components")
* Props
* name
* 自定義的 props
* [由於透過 `<slot />` 渲染內容，並被包裝在 `<Transition />` 內，為了達到預期效果，不建議作為 root element](https://nuxt.com/docs/api/components/nuxt-layout#transitions "Transition · <NuxtLayout> · Nuxt Components")
* `<NuxtPage>`: 顯示 `pages/` 內的頁面
* [官方文件](https://nuxt.com/docs/api/components/nuxt-page "<NuxtPage> · Nuxt Components")
* Props
* name
* route
* pageKey
* 自定義的 props
* [由於內部使用 `<Suspense>`，故不可作為 root element](https://nuxt.com/docs/guide/directory-structure/app#usage-with-pages "app.vue · Nuxt Directory Structure")
* `<NuxtLink>`: 超連結，會自動檢測是內部連結還是外部連結
* [官方文件](https://nuxt.com/docs/api/components/nuxt-link "<NuxtLink> · Nuxt Components")
* Props
* to
* href
* target
* rel
* noRel：另開新分頁、外部連結預設會加上 `rel="noopener noreferrer"`，若不想要可添加 `no-rel`
* activeClass
* exactActiveClass
* replace
* ariaCurrentValue
* external：強制將連結視為外部（true）或內部（false）
* prefetch
* noPrefetch
* prefetchedClass
* custom

## 動態路由
:::info
[官方文件](https://nuxt.com/docs/guide/directory-structure/pages/#dynamic-routes "Dynamic Routes · pages/ · Nuxt Directory Structure")
:::

以 `[]` 包住參數名稱
*(Nuxt 2 的寫法是 `_參數`)*

// 範例：`pages/users-[group]/[id].vue`
<script setup>
  const route = useRoute();
  console.log(route.params.group);
  console.log(route.params.id);
</script>

<template>
  <p>{{ $route.params.group }} - {{ $route.params.id }}</p>
</template>

### 注意事項
:::danger
:exclamation: 命名父路由優先權高於動態路由
:::
#### 範例
`pages/user.vue` 優先權高於 `pages/user/[id].vue`，這時路徑 ==/user== 和 ==/user/1234== 都會顯示 `pages/user.vue` 頁面
#### 修正方法
必須把 `pages/user.vue` 改為 `pages/user/index.vue`，才能正確顯示 ==/user== 和 ==/user/1234== 頁面

### Catch-all Route
:::info
* [官方文件 - Catch-all Route](https://nuxt.com/docs/guide/directory-structure/pages/#catch-all-route "Catch-all Route · pages/ · Nuxt Directory Structure")
* [官方文件 - setResponseStatus Util](https://nuxt.com/docs/api/utils/set-response-status "setResponseStatus · Nuxt Utils")
* [官方文件 - useRequestEvent Composable](https://nuxt.com/docs/api/composables/use-request-event "useRequestEvent · Nuxt Composables")
:::

* 檔名必須設為 `[...slug].vue`
* *Nuxt 2 的寫法是 `_.vue`*
* 所有找不到頁面的網址都會轉導到這頁(404 Page not found)
* 使用時不可在 `pages/` 第一層建立動態路由，不然會搶走 `[...slug].vue` 的優先權！

<script lang="ts" setup>
  if (process.server) {
    // useRequestEvent 在瀏覽器會回傳 undefined
    const event = useRequestEvent();
    // setResponseStatus 在瀏覽器無效
    setResponseStatus(event, 404);
  }
</script>

<template>
  <div>
    <p>客製化 404 頁面</p>
    <p>目前輸入的路徑：{{ $route.params.slug }}</p>
  </div>
</template>

## metadata
:::info
[官方文件](https://nuxt.com/docs/guide/directory-structure/pages#page-metadata "Page Metadata · pages/ · Nuxt Directory Structure")
:::
在 `<script>` 或 `<script setup>` 內使用 `definePageMeta`，可以設定 `alias` (頁面別名)、`keepalive`、`layout`、`name`、`path`、`middleware` 等等

## useRoute
:::info
[官方文件](https://nuxt.com/docs/api/composables/use-route "useRoute · Nuxt Composables")
:::

取得 route 相關資訊

### 用法
在 `setup`、plugin、route middleware 內：`useRoute()`
在 `<template>` 內：`$route`

* fullPath: URL 路徑，包含 path、query 和 hash
* hash: URL 內寫在 `#` 後面的內容
* 假設路徑為 `routing/b#1234`，則此值為 `#1234`
* matched: array of normalized matched routes with current route location
* meta: 附加到記錄的自定義資料
* 假設自訂 `definePageMeta({ title: 'Page Title', alias: '/rrr' });`，則此值為 `{title: 'Page Title', alias: '/rrr'}`
* name: 路由名稱
* params: 動態參數
* path: URL 路徑名
* query: 查詢參數
* redirectedFrom: 重定向來源路由
#### 範例 - 動態參數 dynamic parameters

// pages/user/[id]/index.vue
// 假設路徑為 user/12345
<script setup>
  const route = useRoute();
  console.log(route.params); // { id: '12345' }
</script>

<template>
  <!-- 會渲染成 <p>{ "id": "12345" }</p> -->
  <p>{{ $route.params }}</p>
</template>

#### 範例 - 查詢參數 query parameters

// 假設路徑為 routing/a?test=testValue
<script setup>
  const route = useRoute();
  console.log(route.query); // {test: 'testValue'}
</script>

## 參考資料
* [官方文件 - Pages Directory](https://nuxt.com/docs/guide/directory-structure/pages "pages/ · Nuxt Directory Structure")
* [官方文件 - Routing](https://nuxt.com/docs/getting-started/routing "Routing · Get Started with Nuxt")

---

:::info
建立日期：2023-08-30
更新日期：2023-11-22
:::