介绍
@lab009/teide-router 是一个轻量级的前端路由库，支持基于 hash 和 history 模式路由的单页应用（SPA）。
安装
使用 npm 安装：
npm install @lab009/teide-router
使用方法
创建路由
-- -------------------- ---- -------
------ - ------------ - ---- ----------------------
----- ------ - --------------
----- ------- -- -------- ----
------- -
-
----- ----
---------- ----
--
-
----- ---------
---------- -----
--
-
----- ----
---------- --------
-
-
--路由模式
@lab009/teide-router 支持两种路由模式：
- hash：使用 URL 中的 # 符号来模拟路由，不会向服务器发送请求，适用于单页应用。
- history：使用 HTML5 的 History API 来实现路由，需要服务器端配置支持，适用于多页应用。
const router = createRouter({
mode: 'hash', // 路由模式，默认为 hash
// ...
})路由配置
通过创建一个包含 path 和 component 的 route 对象，可以配置路由。
-- -------------------- ---- -------
----- ------ - --------------
-- ---
------- -
-
----- ----
---------- ----
--
-
----- ---------
---------- -----
--
-
----- ----
---------- --------
-
-
--跳转路由
可以使用 router.push() 方法来跳转路由，也可以通过 router.go() 方法控制浏览器历史记录的前进和后退。
// 跳转路由
router.push('/about')
// 前进或后退
router.go(-1)
router.go(1)获取路由参数
可以通过 $route.params 获取路由参数。
-- -------------------- ---- -------
-- ----
-
----- ------------
---------- ----
-
-- ---------
------ ------- -
--------- -
----------------------------------
-
-示例代码
以下是一个使用 @lab009/teide-router 的示例代码：
-- -------------------- ---- -------
------ - ------------ - ---- ----------------------
----- ---- - -
--------- -
-----
-------------
---------- -- -- ---- ---------
------
-
-
----- ----- - -
--------- -
-----
--------------
------- -- - ------ --- ---------
------
-
-
----- -------- - -
--------- -
-----
------------
------- --- ----------
------
-
-
----- ------ - --------------
----- -------
------- -
-
----- ----
---------- ----
--
-
----- ---------
---------- -----
--
-
----- ----
---------- --------
-
-
--
--- -----
-------
--- -------
--------- -
-----
----
---------------- ------------------------------
---------------- ------------------------------------
-----
--- --
---------------------------
------
-
--总结
@lab009/teide-router 是一个持续更新和维护的前端路由库，支持 hash 和 history 两种路由模式，并提供简单易用的 API。希望这篇使用教程能够帮助到大家。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc7967216659e2444c3