https://github.com/attrs/x-router

frontend router
https://github.com/attrs/x-router

frontend-router router

Last synced: 17 days ago
JSON representation

frontend router

• Host: GitHub
• URL: https://github.com/attrs/x-router
• Owner: attrs
• License: mit
• Created: 2016-04-12T08:03:48.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2018-06-05T15:18:44.000Z (over 6 years ago)
• Last Synced: 2025-01-10T09:55:20.349Z (29 days ago)
• Topics: frontend-router, router
• Language: JavaScript
• Homepage:
• Size: 593 KB
• Stars: 0
• Watchers: 6
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# x-router

[![NPM Version][npm-version]][npm-url] [![NPM Downloads][npm-total]][npm-url] [![NPM Downloads][npm-month]][npm-url] [![NPM Downloads][license]][npm-url] [![Join the chat at https://gitter.im/attrs/x-router][gitter]][gitter-link]

[npm-version]: https://img.shields.io/npm/v/x-router.svg?style=flat

[npm-url]: https://npmjs.org/package/x-router

[npm-total]: https://img.shields.io/npm/dt/x-router.svg?style=flat

[npm-month]: https://img.shields.io/npm/dm/x-router.svg?style=flat

[license]: https://img.shields.io/npm/l/x-router.svg?style=flat

[gitter]: https://badges.gitter.im/attrs/x-router.svg

[gitter-link]: https://gitter.im/attrs/x-router?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge

frontend router

## Install

```sh

$ npm install x-router --save

```

```javascript

var xrouter = require('x-router');

var app = xrouter().use(...).listen();

```

## Usage

```javascript

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();

```

```html

  

  

  

  

  

  home

  /sub

  /sub/index

  /sub/some

  /sub/other

  

  
target1

  


  

  
target2

  


  

  
target3

  


```

### Configuration

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

```html

```

### HTML

```html

/a/b

/a/c

xrouter.href('/a/b/c/d')

```

### Related Project

- [`x-router-modal`](https://www.npmjs.com/package/x-router-modal)

- [`x-router-angular`](https://www.npmjs.com/package/x-router-angular)

- [`x-router-swig`](https://www.npmjs.com/package/x-router-swig)

### License

Licensed under the MIT License.

See [LICENSE](./LICENSE) for the full license text.