用于多个链接的vanilla JavaScript中的动态URL

Question

我在此静态应用中的页脚部分有大约50个链接。是否有可能不为所有50个创建html文件，而是创建一个html文件，其中包含与所有50个链接相关的数据，并根据点击的链接隐藏/显示相关数据？

情景：

• 用户点击链接，将网址称为http://{url}/clicked-link-id/

• 用户根据 clicked-link-id

查看数据

我知道使用Angular很容易，但我不允许使用ui-router或任何其他框架/库。

Answer 1

这里可以遵循的一种方法是解析url以使用JavaScript检索clicked-link-id。

获得clicked-link-id后，可以编写一个函数来显示包含与链接相关内容的元素。

有很多方法可以拆分网址以查找相关信息。 一种粗略的方法，假设链接保留了您共享的结构：

var url = document.location.href;
var splitUrl = url.split("/");
var linkId = splitUrl[splitUrl.length - 1] || splitUrl[splitUrl.length - 2];

此处还需要考虑其他事项。 可能需要在Web服务器端进行配置，以将具有特定结构的所有页面请求重定向到包含此逻辑的页面。否则，您可能会因所有此类请求而收到404错误。