x-routerdeprecated

frontend router

Usage no npm install needed!

<script type="module">
  import xRouter from 'https://cdn.skypack.dev/x-router';
</script>

README

x-router

NPM Version NPM Downloads NPM Downloads NPM Downloads Join the chat at https://gitter.im/attrs/x-router

frontend router

Install

$ npm install x-router --save

var xrouter = require('x-router');
var app = xrouter().use(...).listen();

Usage

var app = xrouter()
  .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', xrouter.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="xrouter.mode" content="auto">
  <script src="dist/x-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>

Configuration

support both pushstate and hash, If you have not set up any value automatically using pushstate or hashbang(#!/path).

<meta name="xrouter.mode" content="pushstate | hashbang | hash | auto">
<meta name="xrouter.debug" content="false | true">
<meta name="xrouter.observe" content="true | false">
<meta name="xrouter.observe.delay" content="1000">

HTML

<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:xrouter.href('/a/b/c/d');">xrouter.href('/a/b/c/d')</a>

Related Project

License

Licensed under the MIT License. See LICENSE for the full license text.