{"id":24493623,"url":"https://github.com/attrs/x-router","last_synced_at":"2026-03-27T04:42:36.582Z","repository":{"id":57400859,"uuid":"56043289","full_name":"attrs/x-router","owner":"attrs","description":"frontend router","archived":false,"fork":false,"pushed_at":"2018-06-05T15:18:44.000Z","size":607,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-06-13T10:09:42.408Z","etag":null,"topics":["frontend-router","router"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/attrs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-12T08:03:48.000Z","updated_at":"2017-11-23T15:12:28.000Z","dependencies_parsed_at":"2022-09-05T03:50:16.628Z","dependency_job_id":null,"html_url":"https://github.com/attrs/x-router","commit_stats":null,"previous_names":["attrs/browser-routes"],"tags_count":84,"template":false,"template_full_name":null,"purl":"pkg:github/attrs/x-router","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/attrs%2Fx-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/attrs%2Fx-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/attrs%2Fx-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/attrs%2Fx-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/attrs","download_url":"https://codeload.github.com/attrs/x-router/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/attrs%2Fx-router/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259624736,"owners_count":22886330,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frontend-router","router"],"created_at":"2025-01-21T19:42:21.457Z","updated_at":"2025-12-12T05:02:17.090Z","avatar_url":"https://github.com/attrs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# x-router\n\n[![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]\n\n[npm-version]: https://img.shields.io/npm/v/x-router.svg?style=flat\n[npm-url]: https://npmjs.org/package/x-router\n[npm-total]: https://img.shields.io/npm/dt/x-router.svg?style=flat\n[npm-month]: https://img.shields.io/npm/dm/x-router.svg?style=flat\n[license]: https://img.shields.io/npm/l/x-router.svg?style=flat\n[gitter]: https://badges.gitter.im/attrs/x-router.svg\n[gitter-link]: https://gitter.im/attrs/x-router?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge\n\n\nfrontend router\n\n## Install\n```sh\n$ npm install x-router --save\n```\n\n```javascript\nvar xrouter = require('x-router');\nvar app = xrouter().use(...).listen();\n```\n\n## Usage\n```javascript\nvar app = xrouter()\n  .config('view target', '#target1')  // default render target\n  .config('views', '/')\n  .use(function(req, res, next) {\n    console.log('hello');\n    next();\n  })\n  .get('/', function(req, res, next) {\n    res.render.html('Hello!');\n  })\n  .use('/sub', xrouter.Router()\n     .use(function(req, res, next) {\n       console.log('sub routing...');\n       res.set('view target', '#target2'); // change render target dynamically\n       next();\n     })\n     .get('/', 'index')  // redirect to `index`\n     .get('/index', function(req, res, next) {\n       res.render.html('sub index!',  {\n         target: '#target3'\n       }).end();\n     })\n     .get('/some', function(req, res, next) {\n       res.end();\n     })\n     .get('/:value', function(req, res, next) {\n       var value = req.params.value;\n       \n       res.render.html('parameter is ' + value, function(err, target) {\n         if( err ) return next(err);\n         console.log('render target is ', target);\n       }).end();\n     })\n  )\n  .on('end', function(e) {\n    console.debug('end', e.detail.href);\n  })\n  .on('writestate', function(e) {\n    console.debug('writestate', e.detail);\n  })\n  .on('notfound', function(e) {\n    console.warn('notfound', e.detail.href);\n  })\n  .on('error', function(e) {\n    console.error('error', e.detail.error);\n  })\n  .listen();\n```\n\n```html\n\u003c!DOCTYPE html\u003e\n\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003e\u003c/title\u003e\n  \u003cmeta charset=\"utf-8\"\u003e\n  \u003cmeta name=\"xrouter.mode\" content=\"auto\"\u003e\n  \u003cscript src=\"dist/x-router.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"app.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003ca href=\"/\" route\u003ehome\u003c/a\u003e\n  \u003ca href=\"/sub\" route\u003e/sub\u003c/a\u003e\n  \u003ca href=\"/sub/index\" route\u003e/sub/index\u003c/a\u003e\n  \u003ca href=\"/sub/some\" route\u003e/sub/some\u003c/a\u003e\n  \u003ca href=\"/sub/other\" route\u003e/sub/other\u003c/a\u003e\n  \n  \u003ch3\u003etarget1\u003c/h3\u003e\n  \u003cdiv id=\"target1\"\u003e\u003c/div\u003e\n  \n  \u003ch3\u003etarget2\u003c/h3\u003e\n  \u003cdiv id=\"target2\"\u003e\u003c/div\u003e\n  \n  \u003ch3\u003etarget3\u003c/h3\u003e\n  \u003cdiv id=\"target3\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Configuration\n\u003e support both `pushstate` and `hash`, If you have not set up any value automatically using `pushstate` or `hashbang(#!/path)`.\n\n```html\n\u003cmeta name=\"xrouter.mode\" content=\"pushstate | hashbang | hash | auto\"\u003e\n\u003cmeta name=\"xrouter.debug\" content=\"false | true\"\u003e\n\u003cmeta name=\"xrouter.observe\" content=\"true | false\"\u003e\n\u003cmeta name=\"xrouter.observe.delay\" content=\"1000\"\u003e\n```\n\n\n### HTML\n```html\n\u003ca href=\"/a/b/c/d/e\" route\u003e/a/b\u003c/a\u003e\n\u003ca href=\"/a/b/c/d/e\" route ghost\u003e/a/c\u003c/a\u003e\n\u003ca href=\"javascript:xrouter.href('/a/b/c/d');\"\u003exrouter.href('/a/b/c/d')\u003c/a\u003e\n```\n\n### Related Project\n- [`x-router-modal`](https://www.npmjs.com/package/x-router-modal)\n- [`x-router-angular`](https://www.npmjs.com/package/x-router-angular)\n- [`x-router-swig`](https://www.npmjs.com/package/x-router-swig)\n\n### License\nLicensed under the MIT License.\nSee [LICENSE](./LICENSE) for the full license text.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fattrs%2Fx-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fattrs%2Fx-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fattrs%2Fx-router/lists"}