在前端开发中，我们经常需要实现一些路由的功能，比如根据不同的 URL 地址来展示不同的页面或者组件。而为了实现路由功能，我们有很多选择，比如 React-Router、Vue-Router 等等。今天我们要介绍的是另外一个 npm 包，它是 hash-path-router。
安装
我们可以通过 npm 来安装 hash-path-router：
npm install hash-path-router --save
使用
使用 hash-path-router 非常简单，我们只需要先在 HTML 中引入相关的 JavaScript 文件：
<script src="https://unpkg.com/hash-path-router/dist/hash-path-router.min.js"></script>
这里我们引入了官方提供的压缩版本的 JavaScript 文件。当然，我们也可以通过 npm 下载源码并使用本地版本。
之后，我们就可以通过以下代码来使用 hash-path-router：
-- -------------------- ---- -------
----- ------ - --- ----------------
------- --
----- ----
---------- -----
-- -
----- ---------
---------- ------
-- -
----- -------------
---------- -----
---
---
---------------在以上代码中，我们先定义了三个路由，分别对应着不同的 URL 地址。当我们的应用启动时，我们会调用 router.start() 来启动路由，等待用户的访问。
路由配置
在上面的代码中，我们定义了三个路由，分别是 /，/about 和 /users/:id。其中，/ 表示应用的首页；/about 表示应用的关于页；/users/:id 表示应用的用户详情页，其中 :id 表示变量，可以表示不同的用户 ID。
但是，我们在代码中只是定义了路由的地址信息，并没有定义每一个路由对应的组件信息。因此，我们需要通过路由的配置来将路由和组件关联起来。
-- -------------------- ---- -------
----- ------ - --- ----------------
------- --
----- ----
---------- -----
-- -
----- ---------
---------- ------
-- -
----- -------------
---------- -----
---
------------------ -
------ ---------------------------------------
--
---
---------------上面代码中，我们通过 resolve 参数来指定组件的导入方式。resolve 函数会在路由匹配成功之后被调用，并且传入当前匹配路由所对应的组件名。这里我们使用 import() 函数来动态导入组件。
跳转
当应用启动之后，我们需要让用户可以通过点击链接或者输入 URL 地址来进入不同的页面。而在 hash-path-router 中，我们可以使用 router.go(path) 函数来实现跳转。
<ul>
<li><a href="#" onclick="router.go('/')">首页</a></li>
<li><a href="#" onclick="router.go('/about')">关于</a></li>
<li><a href="#" onclick="router.go('/users/1')">用户 1 的详情页</a></li>
</ul>在上面的代码中，我们使用了 router.go(path) 函数，并通过 onclick 事件来监听用户的点击，然后调用相应的跳转函数。
示例
我们这里提供了一个简单的示例，来展示如何使用 hash-path-router 完成路由的功能。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------------
-------
------
----
------ -------- ------------------------------------
------ -------- -----------------------------------------
------ -------- ---------------------------------- - -------------
-----
---- ---------------
------- -------------------------------------------------------------------------------
--------
----- ---- - -
--------- -
-----
---------------
-----------------
------
--
--
----- ----- - -
--------- -
-----
-------------
-----------------
------
--
--
----- ---- - -
--------- -
-----
-------- -- ---------------- -- ---------
--------- ---- ---------
------
--
--
----- ------ - --- ----------------
------- --
----- ----
---------- -----
-- -
----- ---------
---------- ------
-- -
----- -------------
---------- -----
---
------------------ -
------ ---------------------------------------
--
---
---------------
---------
-------
-------在上面的示例中，我们定义了三个组件，分别对应着应用的首页、关于页以及用户详情页。然后，我们在路由配置中将组件和路由地址关联起来。最后在 HTML 中使用 router.go(path) 函数来实现路由跳转。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fe481e8991b448dd879