Nuxt 3 中间件返回 404

Question

我正在开发一个显示文章的 Nuxt 3 应用程序。它是现有 React 应用程序的新版本。在旧的 React 应用程序中，文章的 url 格式为 www.mysite.com/id-of-categories/title-of-article 但在 Nuxt 中，它只是 www.mysite.com/posts/title-of-文章.

问题在于，在许多文章中，指向该网站另一篇文章的 url 都写在正文文章中（有 700 多篇文章，所以我不想花一周的时间重写 URL），但是这些旧的如果我可以将 URL 中的 /id-of-category/ 替换为 /posts/，那么链接就可以工作。

我尝试设置一个全局中间件，但这不起作用，要么中间件没有被触发，页面返回 404（正如预期，URL 没有改变），要么它呈现一个无限循环，导致我的计算机崩溃。

我无法使用匿名或命名中间件，因为文章不会在 Nuxt 的 /pages 目录中呈现。最后我只需要 Nuxt 来“检测”URL 格式是否错误并返回正确的格式。另外类别ID的范围可以从01到30。这些链接只能在文章正文中看到，其他地方都看不到

这是我的中间件，我尝试删除前四个项目（在中间件的情况下，前四个项目始终是我提到的类别，从 /01/ 到 /30/，然后将旧类别替换为/posts/ 并返回

export default defineNuxtRouteMiddleware((to, from) => {
 
  if (to.fullPath.includes("/17/")) {
// 17 is for testing, it can be anything between /01/ to /30/
    const newArticleTitle = to.path.substring(4);
    // Redirect to the new URL format
 
    return navigateTo(`/posts/${newArticleTitle}`);
  }
});

谢谢

尝试了中间件，点击文章模板.vue中的内部链接的匿名函数

Answer 1

您需要在页面组件中编写导航器，而不是全局中间件

---

在页面文件夹中创建一个新的页面组件，如下所示

| /
|- pages
|  |- [category_id]
|     |-[article_title].ts

然后，在

/pages/[category_id]/[article_title].ts

中定义导航器

const { data: article } = await useFetch(
    `__THE_RESTful_SHOW_API_OF_YOUR_ARTICLES__`,
);

navigateTo(`/posts/${article.title}`);