👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。

建立路由頁面

建立 About 頁面

在 pages 目錄下建立一個檔案 ./pages/about.vue：

<template>
  <div class="bg-white py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-6xl font-semibold text-yellow-400">大家好！我是 Ryan</h1>
      <p class="my-8 text-3xl text-gray-600">這裡是 /about</p>
    </div>
  </div>
</template>

建立 Contect 頁面

在 pages 目錄下建立一個檔案 ./pages/contact.vue：

<template>
  <div class="bg-white py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-6xl font-semibold text-rose-400">如果沒事不要找我 xDDD</h1>
      <p class="my-8 text-3xl text-gray-600">這裡是 /contact</p>
    </div>
  </div>
</template>

建立路由連結

在首頁 ./pages/index.vue 檔案中，使用  元件建立導航。

<template>
  <div class="bg-white py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-6xl font-semibold text-gray-800">這裡是首頁</h1>
      <div class="my-4 flex space-x-4">
        <NuxtLink to="/about">前往 About</NuxtLink>
        <NuxtLink to="/contact">前往 Contact</NuxtLink>
      </div>
    </div>
  </div>
</template>

修改 app.vue 檔案：

<template>
  <div>
    <NuxtPage />
  </div>
</template>

建立匿名中間件

修改 ./pages/index.vue 檔案：

<script setup>
definePageMeta({
  middleware: defineNuxtRouteMiddleware(() => {
    console.log(`[匿名中間件] 我是直接定義在頁面內的匿名中間件`)
  })
})
</script>

建立具名中間件

在 pages 目錄下建立一個檔案 ./pages/haha.vue：

<template>
  <div class="bg-white py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-6xl font-semibold text-green-400">哈哈 想不到吧！！！</h1>
      <p class="my-8 text-3xl text-gray-600">這裡是 /haha</p>
    </div>
  </div>
</template>

在 middleware 目錄下建立一個檔案 ./middleware/random-redirect.vue：

export default defineNuxtRouteMiddleware(() => {
  if (Math.random() > 0.5) {
    console.log(`[random-redirect 具名中間件] 重新導向至 /haha`)
    return navigateTo('/haha')
  }

  console.log(`[random-redirect 具名中間件] 沒發生什麼特別的事情～`)
})

修改 ./pages/about.vue 檔案，添加具名中間件 random-redirect

<template>
  <div class="bg-white py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-6xl font-semibold text-yellow-400">大家好！我是 Ryan</h1>
      <p class="my-8 text-3xl text-gray-600">這裡是 /about</p>
    </div>
  </div>
</template>

<script setup>
definePageMeta({
  middleware: ['random-redirect']
})
</script>

建立全域中間件

在 middleware 目錄下建立一個檔案 ./middleware/always-run.global.vue：

export default defineNuxtRouteMiddleware((to, from) => {
  console.log(`[always-run.global 全域中間件] to: ${to.path}, from: ${from.path}`)
})

動態添加路由中間件

自訂插件檔案

export default defineNuxtPlugin(() => {
  addRouteMiddleware('named-test', () => {
    console.log('這個是由插件添加的具名中間件，並將會覆蓋任何現有的同名中間件')
  })

  addRouteMiddleware('global-test', () => {
    console.log('這個是由插件添加的全域中間件，並將在每次路由變更時執行')
  }, { global: true })
})

感謝大家的閱讀，歡迎大家給予建議與討論，也請各位大大鞭小力一些：）
如果對這個 Nuxt 3 系列感興趣，可以訂閱接收通知，也歡迎分享給喜歡或正在學習 Nuxt 3 的夥伴。

範例程式碼

• Nuxt 3 建立路由中間件

參考資料

• Nuxt Middleware Directory