PRouter.js
PRouter = pushState + router
PRouter 主要用于解析和无刷新地改变 URL。
PRouter 支持对 path 和 query 的两种路由。
PRouter 采用了 HTML5 history API(pushState),在载入、前进、后退、刷新等各种情况下都能够对 URL 进行解析,向用户展示正确页面。
使用方法
下面的代码演示了如何添加和使用路由
点击查看 Demo
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="button1" onclick="PRouter.push('/demo/1-1')">demo 1-1</button>
<button id="button2" onclick="PRouter.push('/demo/1-2')">demo 1-2</button>
<div id="container">
</div>
<script src="prouter.js"></script>
<script>
// 当 "/demo/:num" 出现在 URL 中或 `num` 的值改变时回调函数就会被执行, 同时 `num` 将作为函数参数.
PRouter.route('/demo/:num', function(num){
document.getElementById('container').innerHTML = 'This is demo ' + num;
});
// 启动 PRouter.
PRouter.start();
</script>
</body>
</html>
下面的代码演示了如何更简单地使用路由
点击查看 Demo
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="/demo/2-1" href-opt="push">demo 2-1</a>
<a href="/demo/2-2" href-opt="push">demo 2-2</a>
<div id="container">
</div>
<script src="prouter.js"></script>
<script>
// 当 "/demo/:num" 出现在 URL 中或 `num` 的值改变时回调函数就会被执行, 同时 `num` 将作为函数参数.
PRouter.route('/demo/:num', function(num){
document.getElementById('container').innerHTML = 'This is demo ' + num;
});
// 向所有有 `href-opt` 属性的 `a` 元素绑定点击事件.
PRouter.bindForTag();
// 启动 PRouter.
PRouter.start();
</script>
</body>
</html>
这种使用方法对浏览器和搜索引擎都更加友好。`PRouter.bindForTag()` 方法会劫持所有“href-opt”属性为“push”或“replace”的 `a` 元素的点击事件,点击时会按照“href”的值来无刷新改变当前 URL。
方法列表
PRouter.start(); // 启动 PRouter
PRouter.route(route, callback, event); // 添加路由
PRouter.queryRoute(key, callback, event); // 为 URL query 中的 key 添加路由
PRouter.bindForTag(tagName); // 为当前页面中的元素绑定点击事件
PRouter.push(url); // 调用 history.pushState 函数改变 URL
PRouter.replace(url); // 调用 history.replaceState 函数改变 URL
PRouter.start()
It will start the router by add a listener to popState
. Be sure it is put after PRouter.route()
or PRouter.queryRoute
.
PRouter.route(route, callback, event)
-
route [String]: a route such like '/demo' or '/demo/:num' or '/demo/p:num'.
-
callback [Function]: It will be called when current URL match the route.
-
event [String, optional]: Determin when the callback will be called. Default 'change'(when route matched first time or param in route changes), 'show'(everytime when route matched) is also avalible.
PRouter.queryRoute(key, callback, event)
-
key [String]: a key that may appears in URL query.
-
callback [Function]: It will be called when the key appears in current URL or or value for it changes.
-
event [String, optional]: Determin when the callback will be called. Default 'change'(when the key appears first time or value for it changes), 'show'(everytime when key is in URL) is also avalible.
PRouter.bindForTag(tagName)
- tagName [String, optional]: Tag name for target elements. Default "a".
For a simpler usage of PRouter, you can run this function after elements being loaded. It will add a click-event listener to elements whose tag name is tagName
and has href-opt
(can be "push" or "replace"), such as <a href="/demo" href-opt="push">demo</a>
.
PRouter.push(url, checkURL)
-
url [String]: Target URL.
-
checkURL [Boolean]: Optional. Determin whether check URL after changing it. Default true.
PRouter.replace(url, checkURL)
-
url [String]: Target URL.
-
checkURL [Boolean]: Optional. Determin whether check URL after changing it. Default true.