前言
Web Components 是一个相对新的前端概念。简单来讲，它是一种打包嵌入了 HTML 标签和 JavaScript 的元素，以扩展 Web 平台的能力。这些元素可以在多个 Web 应用程序中共享，并且可以像时间和日期等内置元素一样在每个 Web 应用程序中使用。
路由系统，是指一个将 URL 与页面元素之间进行映射的框架。在很多 Web 应用程序中，路由系统被用来管理页面之间的导航，以及向后端服务器发送 HTTP 请求，以获取数据和更新 UI。
在这篇文章中，我们将讨论如何将 Web Components 和路由系统配合使用，以创建具有可重用组件的易于维护的 Web 应用程序。
整合 Web Components 和路由系统
当我们开始将 Web Components 和路由系统集成在一起时，我们要解决的一个主要问题是如何控制哪个组件显示在哪个页面上。这就是路由系统的工作。
让我们使用 lit-element 作为我们的 Web Component 和 Vaadin Router 作为我们的路由系统。在这个例子中，我们将创建一个简单的应用程序，其中有两个页面。第一个页面将包含一个 hello-world 组件，第二个页面将包含一个 goodbye-world 组件。
在 index.html 文件中，我们需要定义两个路由，并且配置路由，以相应到不同的组件：
<vaadin-router> <vaadin-route path="/" component="hello-world"></vaadin-route> <vaadin-route path="/goodbye" component="goodbye-world"></vaadin-route> </vaadin-router>
这里，我们使用 vaadin-route 元素来定义我们的路由。每一个 vaadin-route 元素都有一个 path 属性，它指定了需要匹配的 URL 路径。 component 属性指定了哪个 Web Component 将呈现在路由匹配的页面上。
接下来，我们需要实现 hello-world 和 goodbye-world 组件。我们可以通过 lit-element 来实现这些组件，如下所示：
-- -------------------- ---- -------
------ - ----------- ---- - ---- --------------
----- ---------- ------- ---------- -
-------- -
------ -----
--------- -----------
--
-
-
------------------------------------ ------------
----- ------------ ------- ---------- -
-------- -
------ -----
----------- -----------
--
-
-
-------------------------------------- --------------这里，我们使用了 LitElement 的基础，将 HelloWorld 和 GoodbyeWorld 定义为两个新的 Web Component。我们将每个组件的模板放在了 render() 方法中，并使用定义的标记字符串来进行渲染。
现在，我们已经定义了我们的 Web Components 和路由系统。我们可以运行我们的应用程序，看看它是否按照我们的预期工作。
总结
Web Components 是一种新的前端概念，它可以帮助我们创建可重用的组件，以便在多个应用程序中共享。路由系统是另一个常用的前端概念，它可以帮助我们管理应用程序中的导航，并将 URL 映射到页面元素。
在本文中，我们介绍了如何将 Web Components 和路由系统集成在一起，以创建具有可重用组件的易于维护的 Web 应用程序。我们使用了 lit-element 和 Vaadin Router 作为我们的实现，并创建了一个简单的示例应用程序，以演示如何将这两个概念结合在一起。
未来，Web Components 和路由系统将继续成为 Web 应用程序的中心概念之一。掌握如何使用这两个概念将使您成为一名更有效的前端开发人员，并从您的同事和客户那里获得更高的认可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6493f32048841e9894183d20