原生 JavaScript 路由？

我们可以在 JavaScript 中更新 URL。 我们有 pushState 和 replaceState 这些 API

// Adds to browser history
history.pushState({}, "About Page", "/about");

// Doesn't
history.replaceState({}, "About Page", "/about");

JavaScript 还能够替换 DOM 中的任何内容。

// Hardcore
document.body.innerHTML = `
  <div>New body who dis.</div>
`;

因此，结合这些功能，我们可以构建一个网站，在其中我们可以导航到不同的“页面”，但浏览器永远不会刷新。 这就是“单页面应用程序”（SPA）的字面意思。

但路由可能会有点复杂。 在这些有点底层的 API 之外，我们实际上是独自实现它。 我最熟悉使用像 React Router 这样的东西，它允许在 JSX 中表达路由。 就像这样

<Router>
  <Switch>
    <Route path="/about">
      <About />
    </Route>
    <Route path="/users">
      <Users />
    </Route>
    <Route path="/user/:id">
      <User id={id} />
    </Route>
    <Route path="/">
      <Home />
    </Route>
  </Switch>
</Router>

文档将这部分描述为

一个 <Switch> 会查看其子元素 <Route> 并呈现第一个与当前 URL 匹配的子元素。

所以它有点像一个正则表达式匹配器，带有 API 优点，比如能够用类似 :id 的东西创建一个“标记”，它充当通配符，你可以传递给组件以便在查询等中使用。

这是有效的！ 这就是我们有库来帮助我们的原因。 但看起来 Web 平台正在做它最擅长的事情，并在它能够的地方进行干预。 在 Google Web 开发博客上，这基本上以同样的方式解释

路由是每个 Web 应用程序的关键部分。 其核心是，路由涉及获取一个 URL，对其应用一些模式匹配或其他特定于应用程序的逻辑，然后通常根据结果显示 Web 内容。 路由可以用多种方式实现：它有时是在服务器上运行的代码，将路径映射到磁盘上的文件，或者是在单页面应用程序中的逻辑，它等待当前位置的变化并创建相应的 DOM 片段来显示。

虽然没有一个明确的标准，但 Web 开发人员已经倾向于使用一种通用语法来表达 URL 路由模式，这些模式与 正则表达式 非常相似，但有一些特定于域的补充，例如用于匹配路径段的标记。

Jeff Posnick，“URLPattern 将路由带到 Web 平台”

新技术！

const p = new URLPattern({
  pathname: '/foo/:image.jpg',
  baseURL: 'https://example.com',
});

我们可以设置一个这样的模式，然后通过向它发送一个 URL（可能是当前导航到的 URL）来对其运行测试。

let result = p.test('https://example.com/foo/cat.jpg');
// true

result = p.exec('https://imagecdn1.example.com/foo/cat.jpg');
// result.hostname.groups.subdomain will be 'imagecdn1'
// result.pathname.groups[0] will be 'foo', corresponding to *
// result.pathname.groups.image will be 'cat'

我认为这一切的意义可能是能够在不依赖库的情况下构建 SPA 中的路由，从而使网站更轻便、更快。 或者，帮助我们进行路由的库可以利用它，从而使库更小，最终使网站更轻便、更快。

这还不是成熟的技术，所以最好只是 阅读博客文章 来了解其要点。 如果你想尝试一下，可以 使用 polyfill。

说到 Web 平台最近对 SPA 的爱，请查看 共享元素过渡，它似乎正在重新获得势头。