Alternative Router (https://github.com/tildeio/router.js) for Backbone.

router-setup.js

//set up alternative router with nested routes (not available in Backbone's own router)
//and define handlers for each route.

var router = new Router["default"](); //note: ["default"] is only a temporary measure

router.map(function(match) {
  
  match("/overview1").to("overview1", function(match) {
    match("/detail1").to("detail1");
    match("/moredetail1").to("moredetail1");
  });      
  match("/overview2").to("overview2");
  match("/overview3").to("overview3");

});

var myHandlers = {}

myHandlers.overview1 = {
  model: function(params) {
    var d = new $.Deferred();
    setTimeout(function() {
      d.resolve();
    }, 200)
    return d;
  },
  setup: function(post) {
    console.log('::overview1');
    $('#content').html(overview1.render().el);
  }
};

myHandlers.overview2 = {
  model: function(params) {
    return null;
    //return new Backbone.Model({id: params.id}).fetch();
  },
  setup: function(post) {
    console.log('::overview2');
    $('#content').html(overview2.render().el);
  }
};
myHandlers.overview3 = {
  model: function(params) {
    return null;
  },
  setup: function(post) {
    console.log('::overview3');
    $('#content').html(overview3.render().el);
  }
};
myHandlers.detail1 = {
  model: function(params) {
    return null;
  },
  setup: function(post) {
    console.log('::detail1');
    $('#subContent').html(detail1.render().el);
  }
};
myHandlers.moredetail1 = {
  model: function(params) {
    return null;
  },
  setup: function(post) {
    console.log('::moredetail1');
    $('#subContent').html(moreDetail1.render().el);
  }
};

router.getHandler = function(name) {
  return myHandlers[name];
};}}

sample-views.js

//a very simple view type with basic render implementation
var SampleView = Backbone.View.extend({
      initialize: function(options) {
        this.content = options.content;
      },
      render: function() {
        this.$el.html(this.content);
        return this;
      }
});

new SampleView({
  el: '#menu',
  content: '<a href="#overview1/detail1">View 1 (detail)</a> | <a href="#overview1/moredetail1">View 1 (more detail)</a> | <a href="#overview2">View 2</a> | <a href="#overview3">View 3</a>'
}).render();

var overview1 = new SampleView({
  attributes: {
    style: 'background-color:yellow; height:300px; width:450px; '
  },
  content: 'Overview 1 <br><div id="subContent"></div>'
});
var overview2 = new SampleView({
  attributes: {
    style: 'background-color:green; height:300px; width:450px; '
  },
  content: 'Overview 2 <br><div id="subContent"></div>'
});
var overview3 = new SampleView({
  attributes: {
    style: 'background-color:red; height:300px; width:450px; '
  },
  content: 'Overview 3 <br><div id="subContent"></div>'
});
var detail1 = new SampleView({
  attributes: {
    style: 'background-color:grey; height:150px; width:250px; '
  },
  content: 'Detail 1'
});
var moreDetail1 = new SampleView({
  attributes: {
    style: 'background-color:blue; height:150px; width:250px; '
  },
  content: 'More Detail 1'
});

update-backbone-hist-loadurl.js

//get the alternative router to handle the url by using 
//Backbone.history object, which is listening for URL changes

var _loadUrl = Backbone.history.loadUrl;
Backbone.history.loadUrl = function() {
   router.handleURL(this.getHash(window));
   _loadUrl.apply(Backbone.history, arguments);
};

Backbone.history.start();

looks like a fix here for 'default' requirement for standalone use:
tildeio/router.js#101