PRouter.js

PRouter = pushState + router

PRouter 主要用于解析和无刷新地改变 URL。

PRouter 支持对 path 和 query 的两种路由。

PRouter 采用了 HTML5 history API（pushState），在载入、前进、后退、刷新等各种情况下都能够对 URL 进行解析，向用户展示正确页面。

使用方法

下面的代码演示了如何添加和使用路由


<!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.