nuxt3实现301重定向页面

需求

今天市场部来了一需求，一个内容中心的后台添加设置对文章详情页进行301重定向页面，所以前台也要对应实现

---

实现过程

首先我们要知道像这种对某一类的页面做控制的，最好写在中间件里，这样我们可以统一

这个是我的项目目录，接着在middleware目录下创建一个default.global.ts文件，这里我项目引入了typescript，如果没有引入就创建一个default.global.js，然后使用nuxt的小伙伴都知道nuxt里本身就有一些默认的约定和规则，所以这个文件会默认为全局的中间件

接着就是实现的代码，其实很简单，就在中间件里请求接口，然后判断是否需要301重定向页面，如果需要则跳转

方法一：写在全局中间件

import { getDetail } from "~/utils/Api/articleApi"

/**
 * 判断是否需要301跳转，若需要则跳转
 */
export default defineNuxtRouteMiddleware(async (to, from) => {
  if (to.name === "detail-id") {
    const data = await getDetail(to.params.id as string)
    if (data.isRedirect) {
        return navigateTo(data.redirectUrl, { external: true, redirectCode: 301 })
      }
  }
})

方法二：写在单独的中间件

我们在middleware目录下创建一个redirectArticle.ts文件，然后代码如下：

// middleware/redirectArticle.ts
import { getDetail } from "~/utils/Api/articleApi"

export default function ({ params, redirect }) {
  // 判断是否需要重定向
  if (to.name === "detail-id") {
    const data = await getDetail(to.params.id as string)
    if (data.isRedirect) {
        return navigateTo(data.redirectUrl, { external: true, redirectCode: 301 })
      }
  }
}

然后在页面中使用这个中间件

// pages/article/_id.vue
export default {
  middleware: 'redirectArticle',
  // 页面其他配置...
};

如果你使用的是组合式API的语法糖，代码如下：

// pages/article/_id.vue

import { useMiddleware } from 'nuxt';
import redirectArticle from '~/middleware/redirectArticle';

// 使用中间件
useMiddleware('redirectArticle');

---

期望

希望今天的分享可以对大家有帮助哦～