What is the use of Backbone.js router ?

Backbone.js is a compact library used to organize JavaScript code. It is additionally regarded as an MVC/MV* framework. MVC is essentially an architecture paradigm for designing user interfaces, in case you are unfamiliar. It allows you to develop the front of applications in a much easier way by implementing JavaScript functions. BackboneJS provides many building components for putting together client-side web applications, including models, views, events, routers, and collections.

Why use Router from Backbone.js?

The Router is one of the really helpful components provided by Backbone. The URL representation of the application’s object is defined by the router, which is used to route client-side applications. When online applications offer linkable and shareable URLs for crucial spots in the program, a router is necessary. We can employ functions to perform or views to show up when the said keyword is used inside the URL. It is employed in the creation of single-page apps. A web application that just requires one page is known as a single-page application. providing a rich user experience that is comparable to desktop programs. A single-page application has a smooth UI and a relatively faster performance in the application.

How to use Router in Backbone.js?

We need to extend the Router class using the below-given syntax:

var VariableName = Backbone.Router
    .extend({properties, classProperties},);

Then we need to add the keywords which will be added to the URL and we need to define the functions that will be called when these keywords are added. 

routes: {  
    'keyword_1': 'exampleFunc_1',  
    'keyword_2': 'exampleFunc_2'  
    ...
},  

Then we need to define the functions which will be triggered and declared corresponding to the keywords.

exampleFunc_1: function(){  
    ... 
},  
exampleFunc_2: function(){  
    ...  
}, 
...

At last, we need to create an object of the Router class and we need to add the history.start method which makes the Router manipulate the History.

var ObjectName=new Router;     
Backbone.history.start(); 

Example 1: The Example below demonstrates how we can use the Router in Backbone.js.

Output:

 

Reference: https://backbonejs.org/#Router