简介
page.js 是一个轻量级的客户端路由库，可以帮助开发者构建单页应用程序（SPA），实现前端页面之间的无刷新跳转和数据传递等功能。本文将介绍如何使用 npm 安装和使用 page.js，以及如何利用其API实现基本路由。
安装
在开始之前，你需要确保已经安装了 Node.js 和 npm。在命令行窗口中执行以下命令安装 page.js：
--- ------- ---- ------
基本用法
初始化路由
在使用 page.js 之前，我们需要初始化路由。在 HTML 文件中引入 page.js 库并调用 page() 方法即可完成初始化：
------- -----------------------------------------
--------
-------
---------创建路由
使用 page() 方法后，我们就可以通过调用其 .route() 方法创建路由规则。例如，我们可以创建一个简单的路由规则来匹配 /about 路径：
-------------------- ---------- -
----------------- -- --- ----- --------
---当用户访问 /about 路径时，控制台将输出 This is the about page!。
参数传递
除了匹配固定路径外，page.js 还支持路由参数传递。例如，我们可以创建一个带参数的路由规则：
------------------------- ------------- -
------------------- - - --------------- - -----
---在访问 /user/john 路径时，控制台将输出 Hello, john!。可以看到，我们可以通过 ctx.params 对象获取路由参数。
重定向
page.js 还支持页面重定向功能。例如，我们可以创建一个简单的路由规则来将 / 路径重定向到 /home：
------------------ ---------
当用户访问 / 路径时，页面将自动跳转到 /home。
404 页面
为了处理未匹配到任何路由的情况，我们可以使用 .notfound() 方法创建一个 404 页面：
------------------------ -
---------------- --- ---------
---当用户访问不存在的路径时，控制台将输出 404 Not Found!。
示例代码
下面是一个完整的示例代码，演示如何使用 page.js 实现基本路由：
--------- -----
------
------
-------------- ------------
------- -----------------------------------------
-------
------
----
------ --------------------------
------ ----------------------------
------ ---------------------- -------------
------ ---------------------- -------------
-----
---- -------------------
--------
--------- ---------- -
-------------------------------------------- - ----- -- --- ---- -------
---
-------------- ---------- -
-------------------------------------------- - ----- -- --- ----- -------
---
------------------- ------------- -
-------------------------------------------- - ------- - - --------------- - ----
---
--------- ---------- -
-------------------------------------------- - ---- --- --------
---
-------
---------
-------
-------总结
本文介绍了如何使用 npm 安装和使用 page.js，以及如何利用其 API 实现基本路由。page.js 轻量高效，适合构建单页应用程序（SPA）。希望本文能够对你学习前端开发有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/32849