时间戳

首页 > 解决方案 > Nuxt generate 让我的动态路由正常工作

vue.js - Nuxt generate 让我的动态路由正常工作

问题描述

我将 nuxt 用于静态 webapp，使用“mode: spa”和“nuxt generate”。

文档说动态路由不适用于此，但我的应用程序（/dist）在生成后仍然可以在静态服务器上运行，即使没有生成路由。我不知道为什么。

在生成之前，我的路线如下所示：

export function createRouter () { return new Router({ mode: 'history', base: '/', routes: [ { path: "/", component: _36d3a217, name: "index" }, { path: "/:focus", component: _fbe76838, children: [ { path: "", component: _6d415767, name: "focus" }, { path: ":view", component: _19cdee48, name: "focus-view" } ] } ], fallback: false }) }

现在，生成的 /dist 没有按预期创建 /focus 目录......但是在我的应用程序中，我使用路由 URL 参数来查询 API，它仍然有效。

即如下所示的路由，组件将使用“thisFocus”和“thisView”作为 API 中的参数：

/thisFocus/thisView

由于 /dist 中不存在动态路由，我认为这将不再起作用。那么应用程序如何在没有路由的情况下成功使用这些 URL 参数呢？

编辑：另一种更简单的询问方式：为什么即使路线不存在，我仍然可以访问 /:focus/:view route.params？

标签： vue.jsroutingsingle-page-applicationnuxt.js

解决方案

如果您使用nuxt generate，您通常需要一个静态生成的页面。这意味着，每个路由都有一个 HTML 文件，其中包含由服务器呈现的实际 HTML。

你想要它，因为它会给你“两全其美”、良好的 SEO、更快的 TTI 等等，但无需一直运行 Node.js 服务器。（进一步阅读）

如果你想要一个传统的 SPA，你通常只有一个index.html几乎没有 HTML 但包含 Javascript 的文件。

典型 SPA 的源代码 图片

动态路线

当您“预渲染”（=== 静态生成）页面时，Nuxt 需要它应该渲染的路由信息​​。对于没有参数的路线，这很容易（例如about.vue或posts/index.vue）。只要有动态参数，Nuxt 就无法“猜测”它们。

所以是的，动态路由被“忽略”，因为 Nuxt 不知道如何处理它们，除非你告诉 Nuxt 哪些路由要预渲染。

然后将生成这些路由。这并不意味着您无法访问未提供给 Nuxt 的动态路由。您仍然可以访问它们（例如：不存在的帖子）并且请求将被解析（取决于您的服务器配置以及您是否已generate.fallback启用）但您将失去 SEO 优势并将微调器视为后备文件相当于index.html从你的传统SPA。

来源：nuxt核心成员manniL在github上回复

推荐阅读