如果未在根目录访问单页 Web 应用程序 (SPA），则保证 HTML 信息

Guaranteed HTML information if single-page web application (SPA) is not accessed at the root

本文关键字：信息 HTML SPA 根目录 访问 单页 应用程序 Web 如果      更新时间：2023-09-26

>假设我有一个完全单页的应用程序，它提供 HTML 但只在根目录：

因此，对于节点.js Express服务器，它可能看起来像：

app.get('/',function(req,res,next){
   res.render('index',{});
});

我的问题是，如果最终用户有一个完全干净的缓存并且他点击了应用程序的根目录，服务器将发送HTML文件（标题为"index.html"），一切都很好。但是，如果用户有一个完全干净的缓存并且点击除根路由以外的任何内容，那么用户的 Web 浏览器如何知道 DOM 应该是什么样子？换句话说，作为单页应用程序设计人员，如何确保此索引 html 页面从头到尾在前端上表示应用程序的整个生命周期的布局？

根据一些注释进行编辑

您所指的概念称为 UI 路由，这是单页应用程序中非常常见的范例。（Google Backbone UI router、AngularJS UI router等）您将看到大量预先构建的示例，这些示例将使您了解如何实现自己的示例。

从概念上讲，您将在前端使用路由器，对于每个路由，它只需发送一个 GET 请求index.html（在您第一次访问页面时）。然后，路由器解析路由（例如，/some-view ），并根据该路由显示或隐藏index.html页面的特定部分。这不是一件微不足道的事情，这就是为什么人们为它构建框架，但你绝对可以自己实现它。

换句话说，每当用户访问路由www.yourwebsite.com/some-view时，它永远不会为任何其他文件发送GET请求...无论如何，您始终为根/发送 GET 请求（但仅在第一次加载页面时发送。如果用户从一开始就转到/some-view，index.html仍会加载，但前端的路由器会解析该路由，并且逻辑只会显示或隐藏页面的一部分。

更多详情

您有以下几种选择：

  1. 您需要在后端为所有可能的路由创建路由（这不是单页应用）
  2. 您需要在前端处理 UI 路由（例如，在 AngularJS 中，您可以使用 ngRoute ，每当路由更改时，它只会显示index.html页面的不同视图，但它从不向服务器发送请求。

在这种情况下，您实际上希望在后端执行类似操作：

app.get('*',function(req,res,next){
   res.render('index',{});
});

因为用户可以以他们想要的任何 UI 路由进入您的应用程序，但它仍然需要每次加载index.html页面（只是在前端使用不同的视图）。

当然，您需要不同的路由来提供静态内容等，但这只是一个示例。

旁注：如果使用ngRoute，我认为您不需要用*进行一条包罗万象的路线。我想我们会警告所有这些："这取决于你使用的路由框架"。

相关文章：