开发一个带有路由的 Web Components 应用
Web Components 是一种现代化的 Web 开发技术，它通过自定义元素与 Shadow DOM 的配合，让开发者能够创建出完全独立、自包含的组件。而路由这个概念则是用来管理不同页面之间的跳转，一种常见的实现方式是通过 URL 的改变来触发路由。
本文将介绍如何结合这两种技术，开发一个带有路由的 Web Components 应用。我们将以一个简单的应用为例，来详细讲解此过程。
准备工作
在开始之前，我们需要先安装一些依赖库。我们会使用到以下几个库:
- LitElement：一个基于 Web Components 标准的轻量级库，用于开发自定义元素。
- lit-html：一个快速、安全、易维护的 HTML 模板库，用于在 JavaScript 中渲染 HTML 模板。
我们使用以下命令安装这两个库：
npm install lit-element lit-html
创建 Web Components
我们的应用将由两个组件组成：首页组件和详情页组件，我们先创建它们。
-- -------------------- ---- -------
------ - ----------- ---- - ---- --------------
----- -------- ------- ---------- -
-------- -
------ -----
---------------
---------------
--
-
-
----- ---------- ------- ---------- -
------ --- ------------ -
------ -
--- - ----- ------ -
--
-
-------- -
------ -----
----------------
----- -- - ---------- ------------
--
-
-
---------------------------------- ----------
------------------------------------ ------------以上代码创建了两个自定义元素: home-page 和 detail-page。这两个元素的实现非常简单，它们分别渲染了一个“欢迎来到首页”和“欢迎来到详情页”的标题和内容。然而，现在我们还没有实现路由功能，因此这两个组件并不能被正确地呈现在页面上。接下来我们将实现路由功能，让这两个组件可以通过 URL 进行访问。
实现路由
在实现路由功能之前，我们需要先了解一下浏览器的 history API。这个 API 允许我们使用 JavaScript 操作浏览器的历史记录，包括 pushState、replaceState 和 popstate 三个方法。其中，pushState 和 replaceState 方法可以动态修改 URL（即将 URL 加入历史记录，并更新浏览器的地址栏），而 popstate 方法则会在浏览器的历史记录发生改变时触发。
现在，我们使用这些 API 来实现路由。我们将路由规则定义为一个映射表，表示不同的 URL 对应着不同的组件。例如，"/" 表示首页组件，"/detail/:id" 表示详情页组件，其中 ":id" 代表着一个动态的参数，可以包含不同的值。
const routes = [
{ path: '/', component: 'home-page' },
{ path: '/detail/:id', component: 'detail-page' }
];然后，我们需要编写一个 Router 组件，来监听浏览器的 URL 改变事件，并动态地渲染对应的组件。
-- -------------------- ---- -------
------ - ----------- ---- - ---- --------------
------ - ------ - ---- --------------
----- --------------- ------- ---------- -
------ --- ------------ -
------ -
------------- - ----- ------ -
--
-
------------- -
--------
----------------- - - ---------- ----- ------- -- --
------------------- - -------------------------------
-
------------------- -
--------------------------
----------------------
----------------------------------- ---------------------
-
---------------------- -
-----------------------------
-------------------------------------- ---------------------
-
---------------- -
----- ------------ - -----------------
----------------- - -------------
---------------------
-
-------- -
----- - ---------- ------ - - ------------------
-- ------------ -
------ ------------- --- -------------
-
----- ---- - ------------------------------
------ ------------- ------------- ----
-
-
----------------------------------------- -----------------上述代码中的 RouterComponent 组件，主要分为以下几个部分：
- 构造函数中，初始化当前路由为 null，另外定义 popstate 事件回调函数 handlePopstate。
- connectedCallback 方法中，初始化当前路由，监听 popstate 事件。
- disconnectedCallback 方法中，移除 popstate 事件监听。
- handlePopstate 方法中，根据路由规则和当前页面 URL，计算出匹配的路由，并更新当前路由。
- render 方法中，根据当前路由中的组件名称，通过 customElements.get 来获取组件类，然后返回对应的组件实例。同时，将当前路由中的参数作为组件的属性传递下去。
在 RouterComponent 组件中，selected 属性标明当前打开的选项卡的序号，初始值为 0。在 render 方法中，我们根据 selected 属性的值来设置是否为选中状态。同时，我们使用 @click 事件来监听选项卡的点击事件，从而触发浏览器的 URL 发生改变。接下来，我们需要在 RouterComponent 组件中定义 router 对象，用于解析路由。
-- -------------------- ---- -------
----- ------ - -
- ----- ---- ---------- ----------- --
- ----- -------------- ---------- ------------- -
--
------ ----- ------ - -
--------- -
----- - -------- - - ----------------
--- ------ ----- -- ------- -
----- ---- - ---
----- ------- - -------------------------------- --- ---- -- -
---------------
------ ----------
---
----- ----- - --- -----------------------
----- ------- - ----------------------
-- --------- -
----- ------ - -------------------- ---- ------ -- -
----------- - ------------- - ---
------ -------
-- ----
------ -
---------- ----------------
------
--
-
-
------ - ---------- ----- ------- -- --
--
-------------- -
------------------------------ ----- ------
----- ------------- - --- --------------------------
------------------------------------
-
--在上述代码中，resolve 方法根据当前页面的 URL，遍历路由规则，查找与之匹配的规则。如果找到了一个匹配的规则，就构造一个路由对象，并返回。路由对象中包含了组件名称和参数。
navigate 方法用来触发浏览器的 URL 改变事件。它会通过 pushState 方法，将一个新的页面状态加入到浏览器的历史记录中，并在 URL 中添加对应的路径信息。同时，为了触发 handlePopstate 方法，我们手动触发了一个 popstate 事件。
应用展示
接下来，我们将 RouterComponent 组件添加到我们的应用中，以便它监听 URL 改变事件，并根据 URL 加载不同的组件。
-- -------------------- ---- -------
--------- -----
------
------
---------- ---------- ----------
------- ------------- ---------------------------
------- ------------- -------------------------------
-------
------
-----
-- -------- --------------- --------------- ------------
-- ---------------- --------------- --------------- ----------------------
-- ---------------- --------------- --------------- ----------------------
------
-------------------------------------
--------
-------- --------------- ----- -
-- ------ -- --------------------- -----------------------
----------------------
------ ------
-
---------
-------
-------在应用中，我们定义了一个 nav 元素，并将首页、详情页1、详情页2 的链接放在里面。当用户点击这些链接时，我们通过 navigate 函数，触发了浏览器的 URL 改变事件。
现在，我们可以访问我们的应用，以验证它能够正确地路由到对应的页面。
总结
在本文中，我们学习了如何结合 Web Components 和路由技术，来创建一个完整的、自包含的应用。使用 Web Components 和路由技术，可以让我们更加灵活地组织代码，同时也提高了应用的可维护性和可拓展性。
在实际开发过程中，我们可能还需要考虑一些更复杂的场景，例如异步加载组件、嵌套路由、路由守卫等等。然而，基于上述的基础知识，我们可以轻松地对应用进行拓展，开发出更加完善的 Web Components 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6537bf337d4982a6eb052400