使用Nuxt.js 2动态路由时遭遇意外404错误求助

以下是针对你遇到的账户详情页404问题的几个核心排查方向：

• 确认链接使用<nuxt-link>而非原生<a>标签
  客户端路由跳转必须依赖Nuxt提供的<nuxt-link>组件，原生<a>标签会触发整页刷新，无法被Nuxt路由系统拦截。正确写法示例：

  <nuxt-link :to="`/accounts/${account.id}`">查看账户 {{ account.id }}</nuxt-link>
  

• 静态生成模式下需预渲染动态路由
  若你使用nuxt generate构建静态站点，Nuxt不会自动生成_id.vue对应的动态页面。需在nuxt.config.js中配置预渲染路由：

  export default {
    generate: {
      routes: async () => {
        // 替换为获取所有账户ID的实际逻辑（比如调用API）
        const accountIds = ['80840', '12345', '67890']
        return accountIds.map(id => `/accounts/${id}`)
      }
    }
  }
  

  构建时Nuxt会根据配置生成每个账户详情页的静态文件，解决点击链接后的404问题。

• 尝试通过路由名称跳转
  直接使用路由配置中的名称跳转，避免路径拼写错误：

  <nuxt-link :to="{ name: 'accounts-id', params: { id: account.id } }">查看账户</nuxt-link>
  

  这种方式直接对应你.nuxt/router.js中定义的accounts-id路由，可靠性更高。

• 服务器配置兜底（非静态部署场景）
  若使用SSR或SPA模式部署，需确保服务器将所有路由请求转发到Nuxt入口文件。以Nginx为例，配置如下：

  location / {
    try_files $uri $uri/ /index.html;
  }
  

  注：此场景多为刷新页面时404，点击链接触发的404优先排查前三项。

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