前端开发中的路由组件（Router）是不可或缺的一部分，它能够帮助我们将 URL 与页面中的组件进行绑定，并且实现页面跳转的功能。在当前的前端技术栈中，有很多成熟的路由组件库，比如 Vue Router 和 React Router 等，它们为我们提供了非常方便和灵活的路由管理方式。
但是，有时候我们也需要一些更轻量级的路由组件解决方案，比如在一些小型项目中使用。Custom Elements API 是一个非常适合实现轻量级路由组件的组件化技术，它不需要依赖任何第三方库，同时也非常容易上手。
本文将介绍如何使用 Custom Elements API 构建一个简单的路由组件。我们将使用 ES6 的 Class 和 Template Literal 语法，同时也会使用一些常用的前端技术，比如浏览器 History API 和 URLSearchParams 对象。
前置知识
在继续之前，你需要对以下技术有一定的掌握：
- ES6 的 Class 和 Template Literal 语法
- HTML5 的 Custom Elements API
- 浏览器 History API 和 URLSearchParams 对象
- CSS3 的伪类和伪元素
如果你对以上技术还不熟悉，可以先查阅相关文档进行学习。
实现思路
我们将实现一个简单的路由组件，包含两个页面：首页和关于页面。当 URL 中出现 / 和 /about 时，分别显示对应的页面。我们的实现思路如下：
- 使用 Custom Elements API 定义一个名为
my-router的自定义元素，其中包含两个路由页面：my-home和my-about。 - 定义一个路由管理器类
Router，实现路由的跳转和 URL 的监听。 - 在页面加载完成后创建一个
Router实例，并将其与my-router组件绑定。 - 使用 CSS3 的伪类和伪元素实现页面过渡效果。
开始实现
定义自定义元素
自定义元素的定义需要调用 customElements.define 方法，并通过 class 关键字定义一个 ES6 类。在类中使用 constructor 方法初始化组件的状态和属性。这里我们需要定义两个属性：path 和 templateId，分别表示当前路由的 URL 和对应的页面内容元素。
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
--------- - ---
--------------- - ---
-
-
---------------------------------- ----------
----- ------ ------- ----------- -
------------- -
--------
-------------- - --------- -----------
-
-
-------------------------------- --------
----- ------- ------- ----------- -
------------- -
--------
-------------- - ---------- -----------
-
-
--------------------------------- ---------实现路由管理器
接下来，我们需要实现一个简单的路由管理器。在这个路由管理器中，我们需要维护当前的 URL，以及当用户跳转时，加载对应的路由组件并显示在页面上。
在 Router 类中，我们需要定义如下的属性和方法：
-- -------------------- ---- -------
----- ------ -
------------------- -
----------- - -------
------------ - ---------------
------------- - ----------------
------------
-
------ -
--------------
--------------
-
-------- -
----------------------------------- -- -- -
--------------
---
-
-------- -
----- ---- - ---------------------- -- ----
----- ----- - ------------------ -- ------ --- ------
-- ------- -
-------------------
-
-
------------- -
----- ------ - ------------------------------------
----- -------- - -----------------------------------------
-- ------- -- --------- -
----------- - -----------
----------------- - -----------------
---------------- - -------------------
-
-
-我们首先在 init 方法中注册路由监听，通过浏览器 History API 维护 URL 和页面跳转状态。当 URL 发生变化时，update 方法会根据当前 URL 从路由数组中查找到对应的路由，然后将之渲染到页面中。
创建路由实例
在页面加载完成时，我们需要创建一个新的 Router 实例，并将其与 my-router 组件进行绑定。在组件的 connectedCallback 回调函数中，我们将路由数组定义为实例属性 routes，然后初始化路由实例。
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
--------- - ---
--------------- - ---
-
------------------- -
----------- - -
- ----- ---- ----------- --------------- --
- ----- --------- ----------- ---------------- -
--
----------- - --- --------------------
-
-实现过渡效果
为了让页面切换更加自然，我们可以使用 CSS3 的伪类和伪元素实现一些简单的过渡效果。具体来说，我们为 my-router 组件添加一个 CSS 类 my-router--active，当该类生效时，页面切换时会产生变化。
-- -------------------- ---- -------
--------- -
--------- ---------
---- --
----- --
------ -----
------- -----
----------- --- --- ---------
-
--------------------------- -
-------- --
---------- -----------
-完整代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- -------- --------------
-------
--------- -
--------- ---------
---- --
----- --
------ -----
------- -----
----------- --- --- ---------
-
--------------------------- -
-------- --
---------- -----------
-
--------
-------
------
--------- -------------------
-------- ---------
-----------
--------- --------------------
--------- ---------
-----------
-----------------------
--------
----- ------ -
------------------- -
----------- - -------
------------ - ---------------
------------- - ----------------
------------
-
------ -
--------------
--------------
-
-------- -
----------------------------------- -- -- -
--------------
---
-
-------- -
----- ---- - ---------------------- -- ----
----- ----- - ------------------ -- ------ --- ------
-- ------- -
-------------------
-
-
------------- -
----- ------ - ------------------------------------
----- -------- - -----------------------------------------
-- ------- -- --------- -
----------- - -----------
----------------- - -----------------
------------------------------------------
---------------- - -------------------
-------------------- -- -
---------------------------------------------
-- ----
-
-
-
----- -------- ------- ----------- -
------------- -
--------
--------- - ---
--------------- - ---
-
------------------- -
----------- - -
- ----- ---- ----------- --------------- --
- ----- --------- ----------- ---------------- -
--
----------- - --- --------------------
-
-
----- ------ ------- ----------- -
------------- -
--------
-------------- - --------- -----------
-
-
----- ------- ------- ----------- -
------------- -
--------
-------------- - ---------- -----------
-
-
---------------------------------- ----------
-------------------------------- --------
--------------------------------- ---------
---------
-------
-------总结
本文介绍了如何使用 Custom Elements API 实现一个简单的路由组件。在这个实现中，我们利用了 ES6 的 Class 和 Template Literal 语法、HTML5 的 Custom Elements API、浏览器 History API 和 URLSearchParams 对象、CSS3 的伪类和伪元素等前端技术，为我们提供了一种轻量级的路由管理方式。
在实践中，我们可以根据不同的需求和场景，灵活选用不同的路由组件库，也可以借鉴本文的实现方式，自行扩展和优化。有了这个基础，相信熟悉现有的路由组件库也更加容易了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a615e448841e98942994ab