my router not working with back / forward click - backbone.js

Question

My router looks like this:
define(function(require) {
var _ = require('underscore'),
Backbone = require('backbone'),
homeStageView,
homeSidebarView,
yxyStageView;
return Backbone.Router.extend({
routes: {
'/web/:route' : 'viewLoader'
},
initialize: function() {
//this._bindRoutes();
$('.link').click(function(e) {
e.preventDefault();
Backbone.history.navigate($(this).attr('href'), true);
});
},
viewLoader: function(route) {
switch(route) {
case 'home':
this.homeHandler();
break;
case 'yxy':
this.yxyHandler();
break;
}
},
// navigation handlers
homeHandler: function() {
if ( !homeStageView ) {
require(['views/home-stage-view'], function(HomeStageView) {
homeStageView = new HomeStageView();
homeStageView.render();
});
}
else {
homeStageView.render();
}
this.renderHomeSidebarView();
},
yxyHandler: function() {
if ( !yxyStageView ) {
require(['views/yxy-stage-view'], function(YxyStageView) {
yxyStageView = new YxyStageView();
yxyStageView.render();
});
}
else {
yxyStageView.render();
}
this.renderHomeSidebarView();
},
});
});
and in my main view I init the router like this:
appRouter = new AppRouter();
if ( history && history.pushState ) {
Backbone.history.start({pushState: true});
console.log('has pushState');
}
else {
Backbone.history.start();
console.log('no pushState');
}
This works fine for loading all my views but it works not when user clicks the back forward button.
The url in the address bar chances accordingly but that's it. Obviously, I'm missing something.
Could someone please help out?

Answer 1

From the fine manual:
extend Backbone.Router.extend(properties, [classProperties])
[...] Note that you'll want to avoid using a leading slash in your route definitions:
Your route is /web/:route so try removing the leading slash:
routes: {
'web/:route': 'viewLoader'
}