Backbone.js route Router

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.

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>

Output:

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

Backbone.js route Router

Explore