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