[{"data":1,"prerenderedAt":286},["ShallowReactive",2],{"page-/post/nuxt/news/nuxt-4-3-route-rules-layouts-isr":3,"surrounding-page":277},{"id":4,"title":5,"author":6,"body":7,"date":264,"description":13,"extension":265,"group":266,"lastmod":264,"meta":267,"navigation":268,"path":269,"rawbody":270,"seo":271,"showTitle":266,"stem":272,"tags":273,"versions":266,"__hash__":276},"content/post/nuxt/news/nuxt-4-3-route-rules-layouts-isr.md","Nuxt 4.3 发布：routeRules 终于能管布局了（还顺手把 ISR/SWR payload 补齐）","Jinx",{"type":8,"value":9,"toc":258},"minimark",[10,14,17,29,32,45,50,62,69,159,165,172,176,182,185,202,205,209,221,225,228,248,251,254],[11,12,13],"p",{},"我每次看 Nuxt 的更新，都有一种感觉：",[11,15,16],{},"本以为只是“又一个小版本”，结果它总能塞进来几个特别顺手的小能力。",[11,18,19,20,24,25,28],{},"Nuxt 4.3 这次最戳我的点有三个：",[21,22,23],"strong",{},"routeRules 直接指定布局","、",[21,26,27],{},"ISR/SWR 的 payload extraction","、以及一堆“开发体验和性能”的暗改。",[11,30,31],{},"来源（官方）：",[33,34,35],"ul",{},[36,37,38,39],"li",{},"Nuxt 4.3 博客：",[40,41,42],"a",{"href":42,"rel":43},"https://nuxt.com/blog/v4-3",[44],"nofollow",[46,47,49],"h2",{"id":48},"_1-routerules-直接指定布局更像配置少一点到处写-meta","1) routeRules 直接指定布局：更像“配置”，少一点“到处写 meta”",[11,51,52,53,57,58,61],{},"以前你想把 ",[54,55,56],"code",{},"/admin/**"," 全都套一个 layout，通常是散落在页面里：",[54,59,60],{},"definePageMeta({ layout: 'admin' })","。",[11,63,64,65,68],{},"4.3 现在可以在 ",[54,66,67],{},"nuxt.config.ts"," 里集中配置：",[70,71,76],"pre",{"className":72,"code":73,"language":74,"meta":75,"style":75},"language-ts shiki shiki-themes github-light","export default defineNuxtConfig({\n  routeRules: {\n    '/admin/**': { appLayout: 'admin' },\n    '/dashboard/**': { appLayout: 'dashboard' },\n    '/auth/**': { appLayout: 'minimal' }\n  }\n})\n","ts","",[54,77,78,98,104,120,133,147,153],{"__ignoreMap":75},[79,80,83,87,90,94],"span",{"class":81,"line":82},"line",1,[79,84,86],{"class":85},"sD7c4","export",[79,88,89],{"class":85}," default",[79,91,93],{"class":92},"s7eDp"," defineNuxtConfig",[79,95,97],{"class":96},"sgsFI","({\n",[79,99,101],{"class":81,"line":100},2,[79,102,103],{"class":96},"  routeRules: {\n",[79,105,107,111,114,117],{"class":81,"line":106},3,[79,108,110],{"class":109},"sYBdl","    '/admin/**'",[79,112,113],{"class":96},": { appLayout: ",[79,115,116],{"class":109},"'admin'",[79,118,119],{"class":96}," },\n",[79,121,123,126,128,131],{"class":81,"line":122},4,[79,124,125],{"class":109},"    '/dashboard/**'",[79,127,113],{"class":96},[79,129,130],{"class":109},"'dashboard'",[79,132,119],{"class":96},[79,134,136,139,141,144],{"class":81,"line":135},5,[79,137,138],{"class":109},"    '/auth/**'",[79,140,113],{"class":96},[79,142,143],{"class":109},"'minimal'",[79,145,146],{"class":96}," }\n",[79,148,150],{"class":81,"line":149},6,[79,151,152],{"class":96},"  }\n",[79,154,156],{"class":81,"line":155},7,[79,157,158],{"class":96},"})\n",[11,160,161,162,61],{},"这玩意的好处很简单：",[21,163,164],{},"你不需要去翻一堆页面文件，才能知道某个路由群到底用啥布局",[11,166,167,168,171],{},"另外 ",[54,169,170],{},"setPageLayout"," 也能传 layout props 了（官方原文就有例子）。",[46,173,175],{"id":174},"_2-isrswr-终于也能抽-payload导航时少打点-api","2) ISR/SWR 终于也能抽 payload：导航时少打点 API",[11,177,178,179,61],{},"官方这次明确说了：payload extraction 现在支持 ",[21,180,181],{},"ISR / SWR / cache routeRules",[11,183,184],{},"我理解就是：",[33,186,187,193,196],{},[36,188,189,190],{},"不只是 prerender 页面能出 ",[54,191,192],{},"_payload.json",[36,194,195],{},"ISR/SWR 的页面也能生成/缓存 payload",[36,197,198,201],{},[21,199,200],{},"客户端路由切换","时可以直接用缓存 payload，减少重复请求",[11,203,204],{},"这对“内容站 + 列表页”其实挺实用的。",[46,206,208],{"id":207},"_3-细节里的-dxserver-alias-可拖拽错误浮层","3) 细节里的 DX：#server alias + 可拖拽错误浮层",[33,210,211,218],{},[36,212,213,214,217],{},"新增 ",[54,215,216],{},"#server"," alias：服务端目录里 import 不再地狱级相对路径（而且还带 import protection）。",[36,219,220],{},"错误浮层可以拖动/最小化：属于那种你用一天就回不去的优化。",[46,222,224],{"id":223},"我会怎么用它给自己留个升级-checklist","我会怎么用它（给自己留个升级 checklist）",[11,226,227],{},"如果你要评估 3→4 或者 4.x 小步升级，我会按这个顺序做：",[229,230,231,234,237],"ol",{},[36,232,233],{},"先看项目有没有“路径全靠 meta 管布局”的情况 → 有的话，routeRules 收一下。",[36,235,236],{},"站点如果有 ISR/SWR → 去确认是否能让 payload 缓存命中（CDN 配置、缓存策略）。",[36,238,239,240,243,244,247],{},"搜一下 ",[54,241,242],{},"createError({ statusCode, statusMessage })"," 这种写法 → 官方已经开始 deprecate，准备对齐 Web API 命名（",[54,245,246],{},"status/statusText","）。",[11,249,250],{},"总之，4.3 不是那种“非升不可”的大版本。",[11,252,253],{},"但它确实是那种——你升了会舒服一点的版本。",[255,256,257],"style",{},"html pre.shiki code .sD7c4, html code.shiki .sD7c4{--shiki-default:#D73A49}html pre.shiki code .s7eDp, html code.shiki .s7eDp{--shiki-default:#6F42C1}html pre.shiki code .sgsFI, html code.shiki .sgsFI{--shiki-default:#24292E}html pre.shiki code .sYBdl, html code.shiki .sYBdl{--shiki-default:#032F62}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":75,"searchDepth":100,"depth":100,"links":259},[260,261,262,263],{"id":48,"depth":100,"text":49},{"id":174,"depth":100,"text":175},{"id":207,"depth":100,"text":208},{"id":223,"depth":100,"text":224},"2026-02-14T00:00:00.000Z","md",null,{},true,"/post/nuxt/news/nuxt-4-3-route-rules-layouts-isr","---\ntitle: Nuxt 4.3 发布：routeRules 终于能管布局了（还顺手把 ISR/SWR payload 补齐）\nauthor: Jinx\ndate: 2026-02-14\nlastmod: 2026-02-14\ntags: [\"新闻\", \"Nuxt\"]\n---\n\n我每次看 Nuxt 的更新，都有一种感觉：\n\n本以为只是“又一个小版本”，结果它总能塞进来几个特别顺手的小能力。\n\nNuxt 4.3 这次最戳我的点有三个：**routeRules 直接指定布局**、**ISR/SWR 的 payload extraction**、以及一堆“开发体验和性能”的暗改。\n\n来源（官方）：\n- Nuxt 4.3 博客：\u003Chttps://nuxt.com/blog/v4-3>\n\n## 1) routeRules 直接指定布局：更像“配置”，少一点“到处写 meta”\n\n以前你想把 `/admin/**` 全都套一个 layout，通常是散落在页面里：`definePageMeta({ layout: 'admin' })`。\n\n4.3 现在可以在 `nuxt.config.ts` 里集中配置：\n\n```ts\nexport default defineNuxtConfig({\n  routeRules: {\n    '/admin/**': { appLayout: 'admin' },\n    '/dashboard/**': { appLayout: 'dashboard' },\n    '/auth/**': { appLayout: 'minimal' }\n  }\n})\n```\n\n这玩意的好处很简单：**你不需要去翻一堆页面文件，才能知道某个路由群到底用啥布局**。\n\n另外 `setPageLayout` 也能传 layout props 了（官方原文就有例子）。\n\n## 2) ISR/SWR 终于也能抽 payload：导航时少打点 API\n\n官方这次明确说了：payload extraction 现在支持 **ISR / SWR / cache routeRules**。\n\n我理解就是：\n- 不只是 prerender 页面能出 `_payload.json`\n- ISR/SWR 的页面也能生成/缓存 payload\n- **客户端路由切换**时可以直接用缓存 payload，减少重复请求\n\n这对“内容站 + 列表页”其实挺实用的。\n\n## 3) 细节里的 DX：#server alias + 可拖拽错误浮层\n\n- 新增 `#server` alias：服务端目录里 import 不再地狱级相对路径（而且还带 import protection）。\n- 错误浮层可以拖动/最小化：属于那种你用一天就回不去的优化。\n\n## 我会怎么用它（给自己留个升级 checklist）\n\n如果你要评估 3→4 或者 4.x 小步升级，我会按这个顺序做：\n\n1. 先看项目有没有“路径全靠 meta 管布局”的情况 → 有的话，routeRules 收一下。\n2. 站点如果有 ISR/SWR → 去确认是否能让 payload 缓存命中（CDN 配置、缓存策略）。\n3. 搜一下 `createError({ statusCode, statusMessage })` 这种写法 → 官方已经开始 deprecate，准备对齐 Web API 命名（`status/statusText`）。\n\n总之，4.3 不是那种“非升不可”的大版本。\n\n但它确实是那种——你升了会舒服一点的版本。\n",{"title":5,"description":13},"post/nuxt/news/nuxt-4-3-route-rules-layouts-isr",[274,275],"新闻","Nuxt","Dvl0_2ffxnKV0mjY42EAN2Q1clPFjatpnw8ygTyFJpU",[278,282],{"title":279,"path":280,"stem":281,"children":-1},"OpenClaw 安装入门（Windows）","/post/zzao/openclaw/openclaw-install-windows","post/zzao/openclaw/openclaw-install-windows",{"title":283,"path":284,"stem":285,"children":-1},"假设你是AI，你的Skill应该是什么样的","/post/zzao/ai-skill-structure","post/zzao/ai-skill-structure",1779005084793]