npm 包 router420 使用教程
前言
在前端开发中，我们经常需要使用路由来管理页面和浏览器的访问历史。npm 包 router420 是一个轻量级的路由管理器，它可以帮助我们快速地实现前端路由功能。
安装
使用 npm 进行安装：
npm install router420 --save
使用方法
创建路由
在 HTML 中，我们需要给 <body> 元素添加一个 data-route 属性，用来作为路由的容器。例如：
<body data-route></body>
在 JavaScript 中，我们可以使用 router420 的 createRouter 方法来创建路由对象，然后使用 addRoute 方法添加路由：
-- -------------------- ---- ------- ----- ------ - --------------- -------------------- - --------- ------------- --- ------------------------- - --------- --------------- --- --------------------------- - --------- --------------- ---
这样，我们就创建了三个路由，分别对应首页、关于我们和联系我们。
渲染模板
接下来，我们需要使用 router420 的 render 方法来渲染模板并显示在页面上：
router.render();
这样，就会自动根据当前 URL 路径匹配自己的路由，并把对应的模板渲染到页面上。
监听路由变化
我们需要使用 router420 的 on 方法来监听路由变化：
router.on('routeChange', (route) => {
console.log('当前路由：', route.path);
});这样，每当路由变化时，就会执行这个回调函数，并打印当前路由的路径。
跳转路由
我们可以使用 router420 的 navigate 方法来跳转路由：
router.navigate('/about');这样，就会跳转到关于我们页面。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ------------
-------
----- -----------
-----
----
------ --------------------
------ ---------------------------
------ -----------------------------
-----
------
---- -------------------
------- -------------------------------------------
--------
----- ------ - ---------------
-------------------- -
--------- -------------
---
------------------------- -
--------- ---------------
---
--------------------------- -
--------- ---------------
---
----------------
------------------------ ------- -- -
-------------------- ------------
---
------------------------------------------ -- -
--------------------------- ------- -- -
-----------------------
----- ---- - ----------------------------------
----------------------
---
---
---------
-------
-------这是一个简单的路由示例，通过点击链接来跳转路由，每次路由变化时都会在控制台打印当前路由的路径。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005597d81e8991b448d709a