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

Question

假设我有一个完全单页的应用程序，该应用程序仅在根目录下提供HTML：

因此，使用node.js Express服务器时，可能类似于：

app.get('/',function(req,res,next){

   res.render('index',{});

});

我的问题是，如果最终用户拥有完全干净的缓存，并且访问了应用程序的根目录，则服务器将发送html文件（标题为“ index.html”），一切正常。 但是，如果用户拥有完全干净的缓存并击中了除根路由以外的任何内容，那么用户的Web浏览器如何知道DOM的外观？ 换句话说，作为单页面应用程序设计者，我如何确保该索引html页面从头到尾在前端的整个生命周期中代表应用程序的布局？

Answer 1

根据一些评论进行编辑

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

从概念上讲，您将在前端使用路由器，对于每条路由，它仅发送一个针对index.html的GET请求（首次访问该页面）。 然后，路由器解析路由（例如/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 ，我认为您不需要使用*进行全部路由。 我想我们将用以下所有警告：“这取决于您使用的路由框架”。