Nuxt3中间件返回404：旧文章URL重定向失效问题求助

一、全局路由重定向（处理外部访问/爬虫） #

你之前的中间件问题在于匹配逻辑不够精确，且未覆盖所有分类ID范围，导致要么不触发要么逻辑错误。按以下步骤修改全局中间件：

1. 在middleware目录下创建redirect-old-article-links.global.ts（或.js）文件——全局中间件必须带.global后缀才能在所有路由触发：

export default defineNuxtRouteMiddleware((to) => {
  // 匹配旧路径格式：/01-30/文章标题
  const oldPathRegex = /^\/(0[1-9]|[12][0-9]|30)\/(.+)$/;
  const match = to.path.match(oldPathRegex);

  if (match) {
    const articleTitle = match[2];
    // 301永久重定向，利于SEO权重保留
    return navigateTo(`/posts/${articleTitle}`, { redirectCode: 301 });
  }
});

• 正则/^\/(0[1-9]|[12][0-9]|30)\/(.+)$/精准匹配01到30的两位分类ID，避免误匹配其他路径
• 用match[2]提取文章标题，比substring更可靠，适配不同长度的分类ID（比如01、17都是两位）
• 添加redirectCode:301告诉搜索引擎这是永久重定向，不会丢失原有页面的SEO权重

2. 无需额外配置，Nuxt默认会自动加载全局中间件。

二、替换文章内容内的旧链接（处理内部点击） #

仅靠路由重定向能解决访问旧链接的问题，但用户在文章内点击旧链接时会触发重定向，体验略有延迟。直接在渲染文章内容时替换链接更流畅：

方法1：使用自定义指令批量替换 #

在plugins目录创建transform-links.ts：

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive('transform-old-links', {
    mounted(el) {
      // 找到内容中所有a标签
      const links = el.querySelectorAll('a');
      links.forEach(link => {
        const href = link.getAttribute('href');
        if (href) {
          // 匹配站内旧链接格式
          const oldLinkRegex = /^\/(0[1-9]|[12][0-9]|30)\/(.+)$/;
          const match = href.match(oldLinkRegex);
          if (match) {
            // 替换为新链接格式
            link.setAttribute('href', `/posts/${match[2]}`);
          }
        }
      });
    }
  });
});

然后在文章组件中使用指令：

<template>
  <div v-transform-old-links v-html="article.content"></div>
</template>

方法2：直接在渲染前处理内容字符串 #

如果你的文章内容是纯文本或HTML字符串，可以在获取内容后直接替换：

// 定义替换函数
const transformOldLinks = (content) => {
  const oldLinkRegex = /href="\/(0[1-9]|[12][0-9]|30)\/(.+)"/g;
  return content.replace(oldLinkRegex, 'href="/posts/$2"');
};

// 在获取文章数据后处理内容
const article = await fetchArticle(id);
article.content = transformOldLinks(article.content);

之前方案失效的原因 #

• 全局中间件未带.global后缀，导致没有在所有路由触发
• 匹配逻辑仅针对单个分类ID（17），未覆盖01-30的完整范围
• substring(4)仅适配/17/xxx的路径，当分类ID是01时，/01/xxx的路径长度为3，substring(4)会截取错误内容，导致重定向到无效路径甚至触发循环

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