前言
随着现代化前端开发框架的普及，前端化的趋势越来越明显。前端路由功能成为一个重要的前端开发能力。因此出现了很多前端路由库，如 vue-router, react-router 等。但有时候我们并不需要如此臃肿的路由库，尤其是只有一些小型项目需要路由功能，如何快速搭建一个极简的前端路由功能成了一个问题。这里介绍一个 npm 包 realm-router，它提供了一个简单的方式来实现前端路由。
整体思路
realm-router 的整体思路是通过监听 window.onhashchange 事件，来实现前端路由的跳转。它提供了一个 Router 类，实例化 Router 类后，设置监听的路由路径与对应的回调函数。当 window.onhashchange 事件触发后，会根据当前路由路径匹配到相应的回调函数。
安装
你可以通过 npm 进行依赖安装：
npm install --save realm-router
使用
使用 realm-router 只需要引入该包后，实例化 Router 类并设置路由路径与回调函数即可。
-- -------------------- ---- ------- ------ ------ ---- --------------- ----- ------ - --- --------- -- ----------- -------------------- -- -- - ---------------------- --- ------------------------- -- -- - -------------------------- ---
上述代码实例化一个 Router 类，并设置根路径和 about 路径的回调函数。当用户访问根路径或 about 路径时，对应的回调函数即被触发。
传递参数
在实际项目中，我们常常需要获取用户传递的参数来生成相应的页面。realm-router 也提供了传递参数的功能，如下：
import Router from 'realm-router';
const router = new Router();
// 设置路由路径与回调函数，并传递参数
router.setRoute('/:id', (params) => {
console.log(`访问的是 ${params.id} 页面`);
});在路由路径中可以通过 :name 的方式设置参数，实例化 Router 类的时候，回调函数的第一个参数即是用户传递的参数，你可以使用该参数来生成页面。
其他设置
realm-router 同时提供了一些其他的设置，如设置 404 页面，全局前置函数等，更多的设置可以查看官方文档。
结语
realm-router 是一个非常灵活，且适用于小型项目的前端路由包，使用它可以快速实现前端路由。但它并不适用于大型项目，如需使用更多的功能和组件支持，你可以选择 vue-router, react-router 等其他的前端路由库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63903