前端開發
Nuxt 3 / 4 的 routeRules：重新導向與頁面設定
整理 Nuxt 3 與 Nuxt 4 的 routeRules 用法，可以依照不同網址設定重新導向、預渲染、SSR 與快取，並簡單對照 Nuxt 2 的舊做法。
W
Nuxt 2 時期如果要處理重新導向，常會去修改 router。
到了 Nuxt 3，開始可以使用 routeRules；Nuxt 4 也延續相同的做法。
可以先把它理解成：
告訴 Nuxt「某個網址要怎麼處理」。
例如：
/old-page
→ 重新導向
/blog/**
→ 預先產生 HTML
/admin/**
→ 不做 SSR
/api/**
→ 加上快取
這些都可以集中寫在 nuxt.config.ts。
重新導向
最基本的例子：
export default defineNuxtConfig({
routeRules: {
'/old-page': {
redirect: '/new-page'
}
}
})
使用者進入：
/old-page
就會被帶到：
/new-page
例如首頁進入後直接導向登入頁：
export default defineNuxtConfig({
routeRules: {
'/': {
redirect: '/login'
}
}
})
永久搬家的網址
如果舊網址確定不會再使用，可以明確設定 301：
export default defineNuxtConfig({
routeRules: {
'/old-page': {
redirect: {
to: '/new-page',
statusCode: 301
}
}
}
})
這種比較適合：
舊文章網址
→ 新文章網址
舊分類
→ 新分類
尤其網站已經被搜尋引擎收錄時，應該明確處理重新導向。
一次設定整個路徑
routeRules 也可以使用萬用路徑：
export default defineNuxtConfig({
routeRules: {
'/old/**': {
redirect: '/new/**'
}
}
})
例如：
/old/about
/old/posts/123
/old/category/frontend
都可以套用同一組規則。
** 可以簡單理解成：
這個路徑底下的所有內容。
routeRules 不只是重新導向
routeRules 還可以設定不同頁面的渲染方式。
例如：
export default defineNuxtConfig({
routeRules: {
'/': {
prerender: true
},
'/blog/**': {
prerender: true
},
'/admin/**': {
ssr: false
},
'/api/data': {
cache: {
maxAge: 60 * 10
}
},
'/old-page': {
redirect: '/new-page'
}
}
})
可以白話理解成：
/
→ 建置時先產生 HTML
/blog/**
→ 部落格文章也先產生 HTML
/admin/**
→ 只在瀏覽器執行，不做 SSR
/api/data
→ 快取 10 分鐘
/old-page
→ 導到 /new-page
所以 routeRules 不只是 redirect。
它比較像是：
每個網址的處理規則表。
prerender 與 ssr 是什麼？
prerender
'/about': {
prerender: true
}
代表：
build 的時候就先把這個頁面的 HTML 做好。
比較適合：
首頁
關於我
文章
說明頁面
這些內容不需要每次有人進來都重新產生。
ssr: false
'/admin/**': {
ssr: false
}
代表：
這些頁面不要在伺服器產生 HTML，交給瀏覽器執行。
例如：
後台
管理系統
不需要 SEO 的工具頁
可以視需求使用。
Nuxt 2、3、4 差在哪？
| Nuxt 2 | Nuxt 3 | Nuxt 4 | |
|---|---|---|---|
| 重新導向 | 修改 router / middleware 等方式 | routeRules | routeRules |
| 預渲染設定 | generate 等設定 | routeRules | routeRules |
| 單一路徑關閉 SSR | 沒有現在這種統一寫法 | routeRules | routeRules |
| 路由快取 | 需另外處理 | routeRules | routeRules |
所以如果是從 Nuxt 3 升到 Nuxt 4：
routeRules 基本上不用重新學。
真正變比較大的反而是 Nuxt 4 的：
app/
shared/
目錄結構
routeRules 本身則是延續 Nuxt 3 的概念。
小結
Nuxt 3 與 Nuxt 4 都可以在：
nuxt.config.ts
使用：
routeRules: {
'/某個網址': {
// 這個網址要套用的規則
}
}
最常見的幾個用途：
// 重新導向
redirect: '/new-page'
// 預先產生 HTML
prerender: true
// 關閉 SSR
ssr: false
// 快取
cache: {
maxAge: 600
}
所以可以直接把 routeRules 記成：
依照網址，告訴 Nuxt 這個頁面要怎麼處理。
參考資料