如果未從根目錄訪問單頁​​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 ，我認為您不需要使用*進行全部路由。 我想我們將用以下所有警告：“這取決於您使用的路由框架”。