如何在 Nuxt 3 中捕获路线并重定向到另一个页面

Question

我有一个使用 Nuxt 3 重建的网站。反向链接存在于许多平台上，我需要旧链接指向新页面。示例：旧(website.com/contact.html) 新(website.com/contact)

我尝试使用中间件，但部署后出现此错误：502 解码 lambda 响应时出错

在我的中间件/重定向文件夹中，我有这个：

const redirects = [{
    'from' : '/contact.html',
    'to' : '/contact'
}]

export default function (req, res, next) {
    const redirect = redirects.find((r)=> r.from === req.url)

    if (redirect) {
        res.writeHead(301, { Location: redirect.to })
        res.end()
    } else {
        next()
    }
}

它在本地工作，但部署到 netlify 后就不行了！

我将其添加到我的 nuxtconfig 文件中：

    serverMiddleware: [
        '~/middleware/redirect'
    ]

我认为这个中间件将充当网络来捕获对旧 contacts.html 页面的任何请求并将其重定向到新的联系页面。但相反，它发送了 lambda 错误，我环顾四周，没有找到可靠的修复方法。我愿意接受任何解决方案，包括不同的重定向方式！谢谢你！

Answer 1

您可以使用inredirect中的选项实现无需中间件的重定向，如下所示：routeRulesnuxt.config.ts

export default defineNuxtConfig({
    routeRules: {
        '/contact.html': { redirect: '/contact' },
        '/external-route': { redirect: 'https://example.com' },
    },
})

您还可以定义一个可以重定向到任何内部或外部页面的新路由。

更多规则选项可以在这里找到： https: //nitro.unjs.io/config/#routerules ，官方文档中提到