简介
Roughter是一款轻量级的前端路由库，可以实现简单的页面路由功能，支持嵌套路由和参数路由等功能。Roughter基于hashchange事件监听实现路由功能，兼容性良好，可用于各种类型的前端项目开发。
安装
使用npm进行安装：
npm install roughter --save
或者直接在项目中引入CDN链接：
<script src="https://cdn.jsdelivr.net/npm/roughter"></script>
使用
初始化
首先，在需要使用Roughter的页面中引入库文件：
<script src="./node_modules/roughter/dist/roughter.min.js"></script>
然后，创建一个Roughter实例：
const router = new Roughter();
添加路由
可以通过add方法来添加路由规则，例如：
router.add('/', function() {
console.log('This is the index page.');
});
router.add('/about', function() {
console.log('This is the about page.');
});监听路由变化
可以通过start方法来监听路由变化，例如：
router.start();
跳转路由
可以通过navigate方法来进行路由跳转，例如：
router.navigate('/about');嵌套路由
Roughter支持嵌套路由，可以通过add嵌套多个路由，例如：
router.add('/about', function() {
console.log('This is the about page.');
router.add('/team', function() {
console.log('This is the team page under the about page.');
});
});参数路由
Roughter支持参数路由，可以通过:来定义参数，例如：
router.add('/users/:id', function(params) {
console.log('User with ID ' + params.id + ' is opened.');
});全局路由守卫
可以通过beforeEach方法来添加全局路由守卫，例如实现登录校验：
router.beforeEach((to, from, next) => {
const isLogin = localStorage.getItem('username');
if (isLogin) {
next(); // 继续路由
} else {
next('/login'); // 跳转到登录页面
}
});示例代码
-- -------------------- ---- -------
--------- -----
------
------
--------------- ---------------
-------
------
-----
----
------ -----------------------
------ -----------------------------
------ --------------------- ----------
------ --------------------- ----------
-----
------
---- ----------------- -- --- ----- -----------
------- ------------------------------------------------------------
--------
----- ------ - --- -----------
--------------- ---------- -
-------------------------------------------- - ----- -- --- ----- -------
---
-------------------- ---------- -
-------------------------------------------- - ----- -- --- ----- -------
---
------------------------ ---------------- -
-------------------------------------------- - ----- ---- -- - - --------- - - -- ---------
---
---------------
---------
-------
-------总结
本文介绍了如何使用Roughter进行前端路由功能开发，包括添加路由、监听路由变化、跳转路由、嵌套路由、参数路由和全局路由守卫等功能。Roughter具有轻量级、兼容性好、易于上手等特点，适用于各种类型的前端项目开发。希望本文能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600552cc81e8991b448d0325