The problem with passing in your routes when you create a Router is that you have to supply all the routing functions together with your routes, which (especially if you have a lot of routes on your site) can easily become messy. Instead, many Backbone programmers define their routes on the Router class itself, as shown here:

var SiteRouter = Backbone.Router.extend({
    routes: {
        'foo': 'fooRoute'
    },
    fooRoute: function() {
        // logic for the "/foo" or "#foo" route would go here }
});
var siteRouter = new SiteRouter();
Backbone.History.start(); // siteRouter won't work without this

As you can see, this approach simplifies the routes' definition and makes them more similar to the events properties of Models and Collections. Instead of defining routing methods with the routes themselves, you can simply give the route the name of a routing method and Backbone will look for that method inside the Router class.

There is also a third way to add routes and that is by using Backbone's route method. This method takes the route as the first argument, the route's name as the second argument, and the route's handler as the third argument. If the third argument is omitted, Backbone will look for a method on the Router with the same name as the route itself:

For example:SiteRouter = new Backbone.Router({
    initialize: function() {
        this.route('foo', 'fooRoute'),
    },
    fooRoute: function() {
        // logic for the "/foo" or "#foo" route would go here}
});

Just as the on method of Models and Collections lets you create event bindings after an instance of the class is created, the route method of Routers allows you to define a new route at any time. This means that you can dynamically create all your routes on the fly after the Router class is created. However, just as you would normally want all the pages of your site to be available to your user when they first visit it, you will generally want all your routes to be available too, which means that you will usually create them in your Routers initialize method.

The main advantage of using the route method is that you can apply logic to your routes. For instance, let's say you have several routes on your site that are only for administrators. If your t can check an isAdmin attribute of a user Model, then it can use this attribute to dynamically add or remove these administrator-only routes when the Router class is initialized, as shown here:

// NOTE: In a real case user data would come from the server
var user = new Backbone.Model({isAdmin: true});SiteRouter = new Backbone.Router({
     initialize: function(options) {
        if(user.get('isAdmin')) {
            this.addAdminRoutes();
        }
    },
    addAdminRoutes: function() {
        this.route('adminPage1', 'adminPage1Route'),
        this.route('adminPage2', 'adminPage2Route'),
        // etc.
    }
});

As you can see in the preceding example, another advantage of using the route method is that you can organize groups of routes into separate functions. This can be useful if you want to turn certain groups of routes on or off together, but it can also be useful simply to organize constant routes. In fact, you can even define some of your routes in an entirely different file as long as your Router has access to them, as shown here:

// File #1
window.addFooRoutes = function(router) {
    router.route('foo', function() {
        //...
    })
}

// File #2SiteRouter = new Backbone.Router({
    initialize: function(options) {
        if(options.includeFooRoutes) {
            addFooRoutes(this);
        }
    }
});