Nuxt中如何实现页面路径末尾带问号查询参数不触发404报错

问题原因 #

你遇到的404报错和查询参数没有关系，核心问题是当前的文件命名不符合pages目录驱动的约定式路由规则：以下划线_开头的.vue文件会被框架识别为动态路由片段，不会被当作search目录的默认入口文件，因此/search路径本身就没有匹配的路由组件，拼接查询参数后自然会报404。

解决方案 #

方案1（推荐，无需额外配置） #

直接重命名文件，将search目录下的_index.vue改为index.vue，修改后的目录结构如下：

pages/
--| search/
-----| index.vue

修改后框架会自动将/search路径映射到该组件，?parameter=1这类查询参数属于路由查询字段，不会影响路径匹配，访问时直接就能正常解析。

方案2（需手动配置路由，适用于必须保留_index.vue命名的场景） #

如果业务逻辑要求不能修改文件名，可以在框架配置中手动扩展路由规则：

• 如果你用的是Nuxt3，在nuxt.config.ts中添加如下配置：

export default defineNuxtConfig({
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        path: '/search',
        component: resolve(__dirname, 'pages/search/_index.vue')
      })
    }
  }
})

• 如果你用的是Nuxt2，在nuxt.config.js中添加如下配置：

export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        path: '/search',
        component: resolve(__dirname, 'pages/search/_index.vue')
      })
    }
  }
}

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