简介
@littleq/littleq-router 是一款轻量级的前端路由库，主要用于 SPA（Single Page Application）开发。它支持 hash 和 history 模式，并提供了丰富的 API 供开发者自由控制路由。
安装
可以通过 npm 或 yarn 安装 @littleq/littleq-router：
npm i @littleq/littleq-router
或
yarn add @littleq/littleq-router
使用
@littleq/littleq-router 的使用非常简单，只需要按照以下步骤进行即可。
在项目中引入 @littleq/littleq-router：
import Router from '@littleq/littleq-router';
创建 Router 实例：
-- -------------------- ---- -------
----- ------ - --- --------
----- ----------
------- -
-
----- ----
---------- ----
--
-
----- ---------
---------- -----
-
-
---其中，mode 表示使用的路由模式，可以设置为 'hash' 或 'history'；routes 表示项目中的路由配置，其中每个路由应包含一个 path 和一个 component 属性，path 表示路由路径，component 表示该路由对应的组件。
将 Router 实例挂载到页面：
router.mount('#app');其中，'#app' 为容器元素的选择器，即路由将被渲染到该容器中。
至此，路由就已经配置好了。
API
@littleq/littleq-router 提供了丰富的 API 供开发者自由控制路由。下面介绍一些常用的 API。
router.push(location)
该 API 用于跳转到指定的路由，location 可以是字符串或对象。如果 location 是字符串，则表示要跳转的路由路径；如果 location 是对象，则应包含 path 和其他可选参数，如下：
router.push({
path: '/about',
query: {
id: '123'
}
});router.replace(location)
该 API 与 router.push 相似，也是用于跳转到指定的路由，但是它不会添加新的历史记录，而是替换当前的历史记录。
router.beforeEach(callback)
该 API 用于在每个路由跳转之前执行的回调函数，可以用于检查用户是否有足够的权限进行路由跳转等操作。
-- -------------------- ---- -------
---------------------- ----- ----- -- -
-- -------- --- --------- -
-------
- ---- -
----- ----- - ------------------------------
-- ------- -
-------
- ---- -
---------------
-
-
---该回调函数接收三个参数，分别表示即将跳转的目标路由、当前路由和一个 next 函数。如果调用 next 函数，则表示可以进行路由跳转，如果不调用 next 函数，则表示阻止路由跳转。
router.afterEach(callback)
该 API 用于在每个路由跳转之后执行的回调函数，可以用于统计路由页面的访问量等操作。
router.afterEach((to, from) => {
console.log(`从 ${from.path} 跳转到了 ${to.path}`);
});该回调函数接收两个参数，分别表示目标路由和当前路由。
以上只是 API 的一部分，更多 API 可以查看官方文档。
示例代码
假设在项目中有两个页面：Home 和 About，分别对应路径 / 和 /about。
-- -------------------- ---- -------
------ ------ ---- --------------------------
----- ---- - -
--------- ------------------
--
----- ----- - -
--------- -------------------
--
----- ------ - --- --------
----- ----------
------- -
-
----- ----
---------- ----
--
-
----- ---------
---------- -----
-
-
---
---------------------- ----- ----- -- -
----- ----- - ------------------------------
-- -------- --- --------- -
-------
- ---- -
-- ------- -
-------
- ---- -
---------------
-
-
---
--------------------- ----- -- -
-------------- ------------ ---- -------------
---
---------------------以上就是 @littleq/littleq-router 的使用教程，如果你正在开发 SPA 项目，可以试试这款库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc7967216659e244547