Nuxt generate 使我的动态路由保持正常工作
Nuxt generate is keeping my dynamic routes working
我正在将 nuxt 用于静态 Web 应用程序，使用 "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 即使路由不存在？
如果您使用nuxt generate，您通常需要一个静态生成的页面。这意味着，每个路由有一个 HTML 文件，其中包含由服务器呈现的实际 HTML。
您需要它，因为它会为您提供 "best of both worlds"、良好的 SEO、更快的 TTI 等等，但没有 运行 一直 Node.js 服务器。 (Further read)
如果您想要传统的 SPA，您通常只有一个 index.html 文件，几乎没有 HTML 但包含 Javascript。
典型SPA的源代码
动态路由
当您 "pre-render"（=== 静态生成）您的页面时，Nuxt 需要它应该呈现哪些路由的信息。对于没有参数的路由来说很简单（例如 about.vue 或 posts/index.vue）。只要有动态参数，Nuxt 就不能 "guess" 它们。
所以是的，动态路由是 "ignored" 因为 Nuxt 不知道如何处理它们，除非你告诉 Nuxt 哪些路由到 pre-render。
然后将生成这些路线。这 并不意味着 你不能访问你没有提供给 Nuxt 的动态路由。您仍然可以访问它们（例如：a post that doesn't exists）并且请求将被解析（取决于您的服务器配置以及您是否启用了 generate.fallback）但是您失去了 SEO 优势并看到了一个微调器，因为后备文件等同于传统 SPA 中的 index.html。
我正在将 nuxt 用于静态 Web 应用程序，使用 "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 即使路由不存在？
如果您使用nuxt generate，您通常需要一个静态生成的页面。这意味着，每个路由有一个 HTML 文件，其中包含由服务器呈现的实际 HTML。
您需要它，因为它会为您提供 "best of both worlds"、良好的 SEO、更快的 TTI 等等，但没有 运行 一直 Node.js 服务器。 (Further read)
如果您想要传统的 SPA，您通常只有一个 index.html 文件，几乎没有 HTML 但包含 Javascript。
典型SPA的源代码
动态路由
当您 "pre-render"（=== 静态生成）您的页面时，Nuxt 需要它应该呈现哪些路由的信息。对于没有参数的路由来说很简单（例如 about.vue 或 posts/index.vue）。只要有动态参数，Nuxt 就不能 "guess" 它们。
所以是的，动态路由是 "ignored" 因为 Nuxt 不知道如何处理它们，除非你告诉 Nuxt 哪些路由到 pre-render。
然后将生成这些路线。这 并不意味着 你不能访问你没有提供给 Nuxt 的动态路由。您仍然可以访问它们（例如：a post that doesn't exists）并且请求将被解析（取决于您的服务器配置以及您是否启用了 generate.fallback）但是您失去了 SEO 优势并看到了一个微调器，因为后备文件等同于传统 SPA 中的 index.html。