Backbone.js routes Router

The Backbone.js routes Router is used for mapping URLs with the parameters of the function of router. It is used to route the client-side application and connect them with the actions and events. When the visitor presses the back button or enters a URL it matches the URL with the particular route and the specified action will fire as an event.

Syntax:

router.routes

Parameters: This parameter is an object which matches the URL to the function or events.

Example 1: In this example, we will illustrate the Backbone.js routes Router. Here we will map the URL component to an event that will write on the document.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>BackboneJS routes 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 routes Router</h3>

    <script type="text/javascript">

        var Router = Backbone.Router.extend({
            routes: {
                '': 'first_route',
                'route/2': 'second_route'
            },
            first_route: function () {
                document.write(
                    "This is by the Router first route.");
            },

            second_route: function () {
                document.write(
                    "This is by the Router Second route.");
            },
        });
        var router = new Router;

        Backbone.history.start();  
    </script>
</body>

</html>

Output:

Example 2: In this example, we will listen to the even trigger by the routes.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>BackboneJS routes 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 routes Router</h3>

    <script type="text/javascript">

        var Router = Backbone.Router.extend({
            routes: {
                '': 'first_event',
                'route/2': 'second_event'
            },
        });

        var router = new Router;
        
        router.on('route:first_event', function () {
            alert(
                "This event is trigger by Router")
        });
        Backbone.history.start();  
    </script>
</body>

</html>

Output:

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

Backbone.js routes Router

Explore