URLessRouter is a way to manage pages, and content without updating the URL. It is designed to work like popular framework routers, but it does not modify or use the browser's url, window.location, anchor tags, etc.
URLessRouter was developed with plain Javascript and does not depend on any other library. This makes it easy to use with almost any Javascript famework. It's also extremely small in size so you can use it without fear of adding bloat to your application.
An example use case for URLessRouter would be to control the content and flow of a wizard.
npm install urlessrouter
or download URLessRouter.js
from the dist
directory. This library can be included using module loaders or including the script in HTML.
To get started with URLessRouter you need to have an empty html element with a unique id.
<div id="routerView"></div> //Note: it must be empty because it's contents will be replaced
Next you need to instantiate URLessRouter and bind it to the element you created
const router = new URLessRouter('routerView'); //Note: there can be multiple routers per page, but they cannot be nested.
Now that the router
has been initialize, it's time to add routes.
router.addRoute({
path: '/employee/{:id}',
name: 'employee',
templatePath: '/employeeInfo.html',
actions: {
employeeInfo: function(params) {
return 'Fetch results for api/employee/' + params.id;
},
additionalInfo: function() {
return returnPromise();
},
},
});
To "navigate" to a specific route you just need to provide the router with the name of the route you want
var returnedActionsData = router.goTo('employee'); //Note: executed actions are returned from go();
For a complete example see the Examples section, or for more information see the Specs section.
##Specs
When invoked with the new
keyword a new URLessRouter is created and bound the the provided HTML element.
htmlElementId: ID of the HTML element that the router will bind to.
Adds a route to the router. One or more routes can be added to the router.
routeObject: contains all parameters used when defining a route. See below for details.
Attribute | Description |
---|---|
path | This field has no real purpose. It can be set for reabability when defining and structuring routes. This attribute is NOT required. |
name | Name of the route that is being defined. This must be unique and is used when navigating to a route. See goTo() |
template | String of html code that will serve as the template for the route. If templateURL is defined then it will be used instead of template. |
templateUrl | Location of the html file to be loaded as the template for the route. |
actions | Object containing functions to be executed for the route. |
This is used to navigate to a route by passing the name of the route, and parameters for the route.
routeName: name of the route to navigate to. The name must match the name that was set in the object passed to addRoute
params: contains the parameters that should be passed to the actions
of the route. This is suppose to mimic URL parameters.
object: An object containing the results of executed actions
.
Code for the live demo can be found HERE