前言
在构建单页面应用程序 (SPA) 中，路由系统是一个必不可少的组件。相比传统多页面应用程序，SPA 通过在前端进行页面渲染，具有更快的加载速度和更好的用户体验。在 SPA 中，路由系统能够管理 URL 和对应的视图组件之间的映射关系。
在本文中，我们将介绍如何使用 hash 模式实现一个简单的前端路由系统。hash 模式可以在浏览器中模拟路由，而无需进行页面刷新，因此非常适合 SPA。
实现
HTML 结构
我们需要一个包含多个路由视图的主容器，并在其中添加各个路由组件。
<div id="app"> <div class="route" data-route="home">Home</div> <div class="route" data-route="about">About</div> <div class="route" data-route="contact">Contact</div> </div>
每个路由组件都被包装在一个 div 元素中，并设置自定义属性 data-route 表示它所对应的路由名称。
JS 代码
为了实现 hash 模式的路由，我们需要监听 hashchange 事件，以便在 URL 发生变化时更新当前路由的视图。
-- -------------------- ---- -------
-- ------------
----- ----- - -------------------------------
----- ------ - ---------------------------------
-- ---- --- -- ---- -
-------- ---------- -
------ -----------------------
-
-- ---------------
-------- ------------------------ -
--- ---- - - -- - - -------------- ---- -
----- --------- - -------------------------------------
-- ---------- --- ----- -
------ ----------
-
-
-
-- ---------
-------- ------------ -
----- ------------- - -----------
----- --------- - ----------------------------------
-- ----------- -
-- --------
--- ---- - - -- - - -------------- ---- -
----------------------- - -------
-
-- --------
----------------------- - ---
- ---- -
-- -------------------
------------- - --------
-
-
-- -- ---------- ------------
------------------------------------- ------------
-- -------
-------------以上代码通过监听 hashchange 事件实现了更新路由视图的功能。当 URL 发生变化时，它会根据新的 hash 值找到对应的路由组件并显示出来。
为了方便起见，我们还提供了一个 getRoute() 函数用于获取当前 URL 中的 hash 值，并且提供了一个 getComponentByName() 函数用于根据路由名称获取对应的路由组件。
总结
在本文中，我们通过实现一个简单的前端路由系统来介绍了 hash 模式的使用方法。hash 模式通过在 URL 中添加 # 符号来模拟路由，而无需进行页面刷新，非常适合 SPA。
虽然本文所实现的路由系统非常简单，但它已经足以满足大部分 SPA 的需求。同时，它还可以作为学习前端路由系统的入门教程，帮助读者更好地理解和使用路由系统。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35139