Nuxt 3配置/articles/:section路由调用articles.vue时出现404错误求助

你遇到的404是因为Nuxt 3已经废弃了Nuxt 2里的router.extendRoutes配置方式，你写的这段代码在Nuxt 3里完全不生效，所以路由没被正确注册。

下面给你两种可行的解决方法：

方法一：使用Nuxt 3约定式路由（推荐） #

这是Nuxt 3最推荐的路由方式，完全不需要手动配置：

• 在pages目录下创建articles/[section].vue文件（注意方括号是必填的，用来标识动态参数）
• 访问/articles/xxx时，Nuxt会自动匹配这个组件，参数可以通过useRoute()获取：

  <script setup>
  const route = useRoute()
  // 获取section参数
  const section = route.params.section
  </script>
  

• 如果你需要保留/articles这个根路径的页面，原来的pages/articles.vue可以继续保留，两者不会冲突。

方法二：手动扩展路由（仅特殊场景使用） #

如果你一定要手动注册路由，需要在项目根目录创建app/router.options.ts文件，而不是在nuxt.config.ts里配置：

import type { RouterConfig } from '@nuxt/schema'

export default <RouterConfig>{
  routes: (existingRoutes) => [
    // 保留原有自动生成的路由
    ...existingRoutes,
    // 添加自定义路由
    {
      path: '/articles/:section',
      // 用动态导入的方式引入组件
      component: () => import('~/pages/articles.vue')
    }
  ]
}

配置完成后重启Nuxt服务，路由就能正常生效了。

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