$ npm install @attrs/router --save
var router = require('@attrs/router');
var app = router().use(...).listen();
var app = router()
.config('view target', '#target1') // default render target
.config('views', '/')
.use(function(req, res, next) {
console.log('hello');
next();
})
.get('/', function(req, res, next) {
res.render.html('Hello!');
})
.use('/sub', router.Router()
.use(function(req, res, next) {
console.log('sub routing...');
res.set('view target', '#target2'); // change render target dynamically
next();
})
.get('/', 'index') // redirect to `index`
.get('/index', function(req, res, next) {
res.render.html('sub index!', {
target: '#target3'
}).end();
})
.get('/some', function(req, res, next) {
res.end();
})
.get('/:value', function(req, res, next) {
var value = req.params.value;
res.render.html('parameter is ' + value, function(err, target) {
if( err ) return next(err);
console.log('render target is ', target);
}).end();
})
)
.on('end', function(e) {
console.debug('end', e.detail.href);
})
.on('writestate', function(e) {
console.debug('writestate', e.detail);
})
.on('notfound', function(e) {
console.warn('notfound', e.detail.href);
})
.on('error', function(e) {
console.error('error', e.detail.error);
}).
.listen();
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="router.mode" content="auto">
<script src="dist/@attrs/router.js"></script>
<script src="app.js"></script>
</head>
<body>
<a href="/" route>home</a>
<a href="/sub" route>/sub</a>
<a href="/sub/index" route>/sub/index</a>
<a href="/sub/some" route>/sub/some</a>
<a href="/sub/other" route>/sub/other</a>
<h3>target1</h3>
<div id="target1"></div>
<h3>target2</h3>
<div id="target2"></div>
<h3>target3</h3>
<div id="target3"></div>
</body>
</html>
support both
pushstate
andhash
, If you have not set up any value automatically usingpushstate
orhashbang(#!/path)
.
<meta name="router.mode" content="pushstate | hashbang | hash | auto">
<meta name="router.debug" content="false | true">
<meta name="router.observe" content="true | false">
<meta name="router.observe.delay" content="1000">
<a href="/a/b/c/d/e" route>/a/b</a>
<a href="/a/b/c/d/e" route ghost>/a/c</a>
<a href="javascript:router.href('/a/b/c/d');">router.href('/a/b/c/d')</a>
Licensed under the MIT License. See LICENSE for the full license text.