如何在开发环境中使用 Nuxt SPA 动态路由？答案

【问题标题】：How to use Nuxt SPA dynamic routes in development environment?如何在开发环境中使用 Nuxt SPA 动态路由？
【发布时间】：2022-10-24 00:43:31
【问题描述】：

我是 Nuxt.js 的新手，正在从事一个 SPA 项目，在该项目中我需要动态路由表。

按照文档，我能够生成动态路由：nuxt generate。但它只为构建生成这些路由。

我的问题是，如何在开发环境中使用动态路由来测试和构建我的 SPA 项目中的 UI？

【问题讨论】：

请编辑问题以将其限制为具有足够详细信息的特定问题，以确定适当的答案。
你好，这里有消息吗？

标签： javascript vue.js nuxt.js nuxtjs3

【解决方案1】：

更新：OP 最终决定坚持使用 SPA。

它们是在开发模式下动态创建的，请按照文档中的说明进行操作：https://nuxtjs.org/docs/features/file-system-routing#dynamic-routes

创建一个给定的结构，如

?pages
 ┣ ?users/
 ┃ ┗ ?[id].vue

然后，转到/users/12 之类的东西，您将可以访问动态页面。以下是有关如何进行的示例：https://stackoverflow.com/a/67490633/8816585

不要忘记重新启动您的开发服务器，以防您创建了一条新路由（不需要generate 顺便说一句，dev 就足够了）。

PS：在动态路由的情况下，Nuxt2 的语法是_id.vue，Nuxt3 的语法是[id].vue。

【讨论】：

我想这是您正在谈论的通用项目，对于 SPA 项目，您必须将 generate 方法添加到 nuxt.config，然后使用 nuxt generate 创建这些动态路由。但是，我仍然不知道如何在开发环境中解决它，因为我收到 404 错误页面。
@MrSmiley，因为您提供了 0 上下文，所以我假设您使用的是 ssr: true 是的。您不需要为 SPA 生成任何内容，因为它是在运行时使用 JS 完成的。在开发中，默认情况下你有 SSR（即使使用 SPA 或 SSG 和 Nuxt），所以它以同样的方式开箱即用。当然，在没有更多努力/背景的情况下提供更多细节是很困难的。
好吧，实际上问题在于命名约定从 Nuxt 3 更改为括号而不是下划线，例如在 _id.vue 中更改为 [id].vue。我认为它不需要更多上下文，因为众所周知，在 SPA 项目中您必须生成这些路由，这里是它的参考 nuxtjs.org/docs/configuration-glossary/configuration-generate 所以是的，“SPA 项目”说明了一切。
@MrSmiley 你的问题没有提到 Nuxt3，所以我认为它使用的是 Nuxt2。语法更改是正确的，同时您仍然这样做不是使用ssr: false 时，需要为开发或生产处理任何类型的生成。当您想让路由保持静态时，预渲染路由很有用，在这里，如果您将其用作 SPA，JS 将在初始加载时生成它们，因为这就是 SPA 的工作方式（Nuxt3 并没有做不同的事情 AFAIK）。
是的，在询问之前我已经尝试将其更改为 SPA，我遇到了一些我真的不知道如何解决的错误，这些错误与 SSH 和 NGINX 相关。我坚持 SPA，因为我现在真的不需要 SSR。谢谢你。