在没有服务器的情况下处理动态路由

Question

是否可以在没有后端服务器或不使用像 Angular 这样的前端框架的情况下提供动态 html 页面？

编辑

澄清一下，索引文件是从后端提供的。 这个问题是关于如何处理索引和动态页面之间的路由。

我有一个包含两个文件的应用程序 - index.html 和 dynamic.html。 当用户单击选项“选项 A”时，它们将被动态提供。html 和 url 更新为 /option-a。 现在，使用服务器这没有问题，并且假设用户从登录页面访问应用程序，这也不是问题，因为可以设置 cookie。 但是，假设用户访问 my-domain/option-a 中的页面。 该路由不存在，也没有要重定向的服务器，因此它将 404。他们必须访问 dynamic.html。

我认为这种架构要求要么有一个服务器来处理路由重定向，要么有一个 SPA 框架。

有什么我想念的吗？

Answer 1

您的SPA框架仅在HTML页面加载后才处于活动状态，为此，您需要将用户为您的域尝试的任何URL重定向到该HTML文件 。 为此，您显然需要一台服务器（并且由于您在谈论my-domain / option-a， 所以我假设您至少有一个基本服务器 ）。 您可以参考此链接以了解服务器如何将URL重定向到特定的html文件： Nodejs-Redirect url 。

加载HTML后，您可以初始化SPA框架并根据URL决定要加载的模板。

注意：没有服务器，您将使用file：//somepath/index.html访问URL， 除此 URL 之外的任何其他内容都将导致404，并且没有SPA框架可以处理。

Answer 2

我认为解决方案是使用静态网站生成器，例如Jekyll或Middleman，并允许您将信息转换为静态页面。 这样一来，您在功能上就可以构建一堆页面，但是它们都是提前编译的。 您可以添加从yaml文件加载的动态内容，它将内容编译成单独的html页面。

Answer 3

这是不可能的，但有一个使用 url 参数的解决方法，如下所示：

my-folder/index.html
my-folder/index.html?=about
my-folder/index.html?=about/sublevel
my-folder/index.html?=profile
my-folder/index.html?=./games

const urlParams = new URLSearchParams(location.search);
const route = urlParams.get('');
console.log(route);
// Should print "about" "about/sublevel" "profile" "./games" 

当然，这种方法不像使用服务器进行路由那样干净，但它是没有服务器的最佳方法。

顺便提一句。 我尝试了另一种解决方案，创建符号链接，所有目标路由都指向同一个index.html文件。 但它不起作用，因为浏览器（firefox）在找到符号链接时默认重定向，因此始终显示主页。