如何在Nuxt3的Nitro服务端中间件中实现URL重写？

项目结构 #

pages/
├── foo.vue
└── bar.vue
server/
└── middleware/
    └── index.js

需求 #

访问/bar时，渲染foo.vue的内容，但浏览器地址栏始终显示/bar，不发生URL跳转。

之前的问题 #

• 使用sendRedirect会直接触发浏览器跳转，URL同步更新为/foo，不符合要求；
• 使用proxyRequest或Nitro路由规则的proxy配置，虽然网络请求显示的是/bar，但Nuxt客户端路由会感知到内容对应/foo，最终还是会更新浏览器URL。

正确实现方案 #

在server/middleware/index.js中直接修改请求的path属性，让Nuxt的服务端路由逻辑认为当前请求的是/foo，从而渲染对应页面，且浏览器URL保持不变：

// server/middleware/index.js
export default defineEventHandler((event) => {
  if (event.path === '/bar') {
    // 修改服务端请求路径，匹配/foo对应的页面组件
    event.path = '/foo'
  }
})

原理 #

Nuxt3的服务端路由匹配完全基于event.path的值。在服务端中间件中修改这个属性，只会在服务端路由处理阶段生效，浏览器端的URL不会被修改，这样就能实现“URL不变但渲染目标页面”的效果。

验证 #

启动项目后访问/bar，浏览器地址栏仍显示/bar，页面内容则是foo.vue的内容，无任何跳转行为。

内容的提问来源于stack exchange，提问作者dbzx10299