Edit in JSFiddle

var HomeView = Backbone.View.extend({
      template: '<h1>Home</h1>',
      initialize: function () {
          this.render();
      },
      render: function () {
          this.$el.html(this.template);
      }
  });
  

var AboutView = Backbone.View.extend({
      template: '<h1>About</h1>',
      initialize: function () {
          this.render();
      },
      render: function () {
          this.$el.html(this.template);
      }
  });
  
  var AppRouter = Backbone.Router.extend({
      routes: {          
          '': 'homeRoute',
          'home': 'homeRoute',
          'about': 'aboutRoute',          
      },
      homeRoute: function () {
          var homeView = new HomeView();          
          $("#content").html(homeView.el);
      },
      aboutRoute: function () {
          var aboutView = new AboutView();          
          $("#content").html(aboutView.el);
      }
  });

  var appRouter = new AppRouter();
  Backbone.history.start();

   

<div id="navigation">
    <a href="#/home">Home</a>
    <a href="#/about">About</a> 
</div>    
<div id="content">
</div>

body { margin: 30px;}
body {font-family: Arial;}
h1{font-weight:bold;font-size:16px;}
p{margin:5px 0px 5px 0px;}
div{margin:15px;}
div a{margin:5px;}