生成后在 Nuxt SPA 中使用动态路由

Posted 2023-02-22

【中文标题】生成后在 Nuxt SPA 中使用动态路由

【英文标题】：Use dynamic routes in Nuxt SPA after generating

【发布时间】：2021-02-21 23:10:06

【问题描述】：

我正在尝试在 Nuxt SPA 中使用动态路由。我知道如何在通用模式下使用动态路由，并且我知道如何在构建时使用函数生成它们，但我正在寻找不需要重新构建数据库中的每个新条目的东西。

我的网络应用程序允许用户创建内容（通过 Strapi 后端），这些内容应该可以立即以 www.domain.com/content/uniqe_id 之类的形式访问（无需重新构建项目） 这可能吗？我可以创建像 /content/index.vue 这样可以访问参数并获取正确内容的东西吗？

附带说明：出于多种原因，我更喜欢使用通用模式，但我在我的项目中使用 Three.js，使其工作的唯一方法是使用 SPA。我已经发布了here

【参考方案1】：

如果您使用的是 SPA 模式，则不必担心动态路由，因为所有内容都在客户端上呈现。您唯一需要注意的是将您的生产服务器设置为始终重定向到您的index.html，这样您在访问其他页面时就不会收到 404。

---

如果您使用的是 Universal，您仍然可以生成一个 SPA 回退，用于在客户端处理您的动态路由，方法是将其添加到您的 nuxt.config.js：

Docs

generate: 
  fallback: true,
  // ...
,

使用它，Nuxt 会生成一个 404.html，它将以 SPA 模式呈现页面，而不是显示 404，而其他路由则正常生成。

如果您想正确生成所有路由并具有即时访问权限，您可以使用此技术向用户显示您页面的临时 SPA 版本，直到页面重建。