Lightweight JavaScript router for implementing “client side” part of SPA. This library can be useful if you don’t want to use complex client frameworks, like Angular, React, Vue or other.
- Tulur.JsRouter does not have dependencies on any components. Implementation is based on native JavaScript only (ECMAScript 5).
- This implementation without JavaScript functions setTimeout/setInterval. Using of these functions increases response time and creates extra loading in browser. So, current implementation does not use them.
- Address of routing does not require hash (#) symbol. You can use a relative route which you want.
- Supports restoring of current page. If you click “Refresh” (F5) in your browser or you write URL address manually, the system restores current page.
- Supports named request parameters. For example, if you use an address like
/my?a=1&b=2you can use JS handler like afunction (a, b) { … }for processing this address. It is important point for me as a developer. I have several similar projects with single complex objects of arguments, so sometimes it is not clear what exact data my handler-function can use. As a result, the code based on Tulur.JsRouter should be easier for review/understanding. - Supports dynamic routes. You have a possibility to define routes in different JS files, also you have a possibility to add new routes dynamically (at any time).
- Supports “not found” error handling.
- Supports browser history.
- Minimal size: 1 kb approx. for a compact version.
This JS library is available on NuGet:
PM> Install-Package Tulur.JsRouter
Here is a simple and complete example of using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tulur.JsRouter example</title>
<script src="/Scripts/tulur.jsRouter-0.9.1.js"></script>
</head>
<body>
<h1>
Tulur.JsRouter example
</h1>
<hr />
<div class="container">
<h3>Menu</h3>
<p><a href="/link1/">Link 1</a></p>
<p><a href="/link2?name=John&id=2">Link 2 (name=John, id=2)</a></p>
</div>
<div class="container">
<h3>Content</h3>
<div id="content"></div>
</div>
<script>
var router = new Router();
router.map('/', function () {
document.getElementById('content').innerHTML = 'Home';
});
router.map('/link1', function () {
document.getElementById('content').innerHTML = 'Link 1';
});
router.map('/link2', function (id, name) {
document.getElementById('content').innerHTML = 'Link 2: id=' + id + ', name=' + name;
});
router.notFound(function (url) {
alert('Page "' + url + '" not found');
});
router.restore(); // Run processing of routes
</script>
<style>
.container {
float: left;
padding: 0 20px;
}
</style>
</body>
</html>- Tulur.JsRouter NOT support parameters like this:
/{Param1}/{Param2}/. System can analyze only ordinary request parameters (after “?” symbol). Maybe this feature will be implemented in future. - Example project based on ASP.NET MVC 5. But if you use another "server side" technology, you can take only 2 files: “Tulur.JsRouter.js” & “Index.html”. Example will NOT work if you open “Index.html” in your browser without any "server side".
At the beginning I tried to find ready component with all features which were described before. I did not find anything like this. As a result I decided to implement this component by myself. Also I had time and I wanted to get experience of implementing "client side" routing component.
If my project help you, you can support my motivation to continue working on this project :-)
Webmoney: Z410376614329 or R181376873839
Yandex.Money: 410012007533568
Ethereum: 0xFcaD676Dc74ea60c2fF9fb623ff7903AC898a32d
https://github.com/chip-js/routes-js
https://github.com/millermedeiros/crossroads.js
https://github.com/krasimir/navigo