通过 vanilla JS 使用路由

Question

我有一个现有的个人网络应用程序，它是由普通的 html 和 javascript 制成的（没有像 React、Vue 等这样的网络框架）。它使用解析服务器后端并提供动态（实时查询）更新。

我在 JS 中使用锦标赛 ID 作为解析服务器后端查询、保存等的输入。目前，这已硬编码到 JS 中。

我现在想根据 URL 使其动态化。例如，如果 url 为 /live/12345/，则 12345 将用作锦标赛 ID。我知道我可以使用像 Express JS 这样的路由器来路由并从 URL 中提取参数，但不清楚如何将参数获取到我的 JS 中。

如果我想保留现有的 html/JS，是否可以在普通 JS 中使用路由并使用 ID 参数？我知道我可以使用 Express + ejs，然后使用here所示的内容获取 ID，但这可以在不需要框架/模板引擎的情况下完成吗？

Answer 1

从根本上讲，路由只是一些

onLoad

Javascript，用于检查您所在的页面并为该 URL 显示适当的页面（即呈现适当的 DOM）。

因此，一些极其简单的普通 JS 路由逻辑将是：

addEventListener("DOMContentLoaded", (event) => {
    const url = window.location + '';
    if (url.endsWith('/') {
       renderHomePage();
    } else if (URL.endsWith('/contact')) {
       renderContactPage
    /...
});

当然，您还必须处理使链接更改 URL，而不实际转到新的 (HTML) 页面（并在使用时重新运行路由逻辑）。 为此，您可以使用历史 API： https://developer.mozilla.org/en-US/docs/Web/API/History_API#examples