Nuxt generate使我的动态路线保持运转

Question

我将nuxt用于静态Web应用程序，使用“模式：spa”和“ nuxt生成”。

文档说动态路由不适用于此功能，但是即使未生成路由，我的应用程序（/ 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？

Answer 1

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

之所以需要它，是因为它可以为您提供“两全其美”，良好的SEO，更快的TTI等，但又不需要始终运行Node.js服务器。 （Further read）

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

典型SPA的源代码

动态路线

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

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

然后将生成这些路由。这并不意味着，您不能访问未提供给Nuxt的动态路由。您仍然可以访问它们（例如：a post that doesn't exists），请求将被解析（取决于您的服务器配置以及您是否启用了generate.fallback）但 SEO的好处，因为备用文件相当于传统SPA中的index.html，因此可以看到微调框。

来源：Replied on github by manniL who is a nuxt core member