如何在 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

您可以添加自己的路由器选项，而不是构建自己的中间件。这是docs.

1. 在项目的根目录中创建一个名为

   app

   的文件夹（与

   nuxt.config.ts

   相同的文件夹。
2. 里面

   /app

   创建文件

   router.options.ts

   .
3. 里面

   router.options.ts

   写：

import type { RouterOptions } from '@nuxt/schema';

// https://router.vuejs.org/api/interfaces/routeroptions.html
export default <RouterOptions>{
  routes: (_routes) => [
    {
      name: 'contact',
      path: '/contact',
      component: () => import('~/pages/contact.vue'),
      alias: '/contact.html',
    },
  ],
};

编辑： 您也可以将

definePageMeta

与

alias

一起使用。 文档.

Answer 2

您可以通过在redirect

中的

routeRules内使用nuxt.config.ts选项实现无中间件的重定向，如下所示：

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

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

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