Backbone.js route Router

Last Updated : 28 Jul, 2022

Backbone.js route Router is a method that is used to create the route for the router manually. The argument of the route may be a routing string or regular expression and each capture string from the route is passed to the callback function of the route.

Syntax:

router.route( route, name, callback );

Parameters:

route: This parameter is a routing string that will match the URL.
name: This parameter is used for naming the trigger route: name when the route match.
callback: This parameter is a function that will be called whenever the route will be matched.

Example1: In this example, we will illustrate the Backbone.js route Router. Here will match the route and append some strings in DOM.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>BackboneJS route Router</title> 
    <script src= 
 "https://code.jquery.com/jquery-2.1.3.min.js" 
            type="text/javascript"> 
    </script> 
    <script src= 
 "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" 
            type="text/javascript"> 
    </script> 
    <script src= 
 "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" 
            type="text/javascript"> 
    </script> 
</head> 
  
<body style="text-align:center;" id="body"> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3>BackboneJS route Router</h3> 
  
    <li> <a href="#/link/1">link_1 </a> </li> 
    <p id='1'> </p> 
  
    <script type="text/javascript"> 
        function write() { 
            document.getElementById('1') 
              .append("This is written by route"); 
        } 
  
        var Router = Backbone.Router.extend({}); 
        var router = new Router(); 
        router.route("link/1", 'link', write); 
        Backbone.history.start();   
    </script> 
</body> 
  
</html>

Output: In the output route match the URL and append string.

Backbone.js route Router

Example 2: In this example, we will use the default route which will match all the URLs if the URL is not defined in the route.

HTML

<!DOCTYPE html> 
<html> 
    
<head> 
    <title>BackboneJS route Router</title> 
    <script src= 
   "https://code.jquery.com/jquery-2.1.3.min.js" 
            type="text/javascript"> 
    </script> 
    <script src= 
 "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
            type="text/javascript"> 
    </script> 
    <script src= 
 "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" 
            type="text/javascript"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3>BackboneJS route Router</h3> 
  
    <ul> 
        <li> <a href="#/link/1">link_1 </a> </li> 
        <li> <a href="#/linkisdefault">other link </a> </li> 
    </ul> 
    <p id='1'> </p> 
  
    <p id='2'> </p> 
  
    <script type="text/javascript"> 
  
        var Router = Backbone.Router.extend({ 
  
            routes: { 
                'link/:id': 'link', 
                '*default': 'link2', 
            }, 
  
            link: function () { 
                document.getElementById('2') 
                  .append("This is written by route"); 
            }, 
            link2: function () { 
                document.getElementById('1') 
                  .append("This is written by Default route hello"); 
            } 
        }); 
        
        var router = new Router(); 
  
        Backbone.history.start(); 
    </script> 
</body> 
  
</html>