对于前端开发人员而言，搭建一个路由是非常必要的。幸运的是，有许多已经构建好的路由，如 Angular 和 React。但是针对小型 Web 项目或没有大型框架的项目，你需要自己构建路由。这就是 @orcden/od-page-router 所做的事情。
本文将教你如何使用 npm 包 @orcden/od-page-router 来构建自己的路由，以及如何在页面中使用它。
安装
在引入 npm 包之前，首先需要在项目中安装它。
npm install @orcden/od-page-router
使用
初始化路由
首先，你需要在 JavaScript 文件中导入 od-page-router，然后将导入的内容存储在变量 ODPageRouter 中。然后，你可以实例化 ODPageRouter 类，并将其存储在 router 变量中：
import { ODPageRouter } from '@orcden/od-page-router';
const router = new ODPageRouter();添加路由
我们需要添加一些路由才能在页面中跳转。使用 router.add 方法添加路由：
router.add('home', '/');
router.add('about', '/about');
router.add('blog', '/blog');在遇到 /，/about，/blog 路径时，router 将会跳转到相应的页面。
路由方法
在页面中调用路由方法 router.go 来实现跳转：
router.go('/about');在遇到 /about 路径时，router 将会跳转到对应的页面。
示例代码
以下是完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
------------- ---------------
-------
------
-----
----
------ -------- -----------------------
------ ------------- ------------------------
------ ------------ -----------------------
-----
------
---- -------------------
------- -----------------------------------------------------------------------------------------
--------
----- ------ - --- ---------------
------------------ -----
------------------- ----------
------------------ ---------
----- ------- - -----------------------------------
----- ------------- - --------- -- -
----------------- - ----------------------
--
------------------ ------- -- -
------ ------- -
---- -------
------------------- -- --- ---- --------
------
---- --------
------------------- -- --- ----- --------
------
---- -------
------------------- -- --- ---- --------
------
--------
------
-
---
----- ----- - -----------------------------------------
------------------------------ -- -
------------------------------ --- -- -
-------------------
---------------------
---
---
---------------
---------
-------
-------结论
这是一个很简单的路由示例，但它可以帮助你更好地理解如何使用 npm 包 @orcden/od-page-router 来构建你自己的路由。使用 od-page-router，你可以轻松地创建跨页面的链接并实现路由功能。因此，如果你的项目需要使用路由，请不要犹豫，安装并使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668fbd9381d61a3541031