Edit in JSFiddle

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

var BlogView = Backbone.View.extend({
      template: '<h1>Blog</h1>',
      initialize: function () {
          this.render();
      },
      render: function () {
          this.$el.html(this.template);
      }
  });
  
  var AppRouter = Backbone.Router.extend({
      routes: {          
          '': 'homeRoute',
          'home': 'homeRoute',
          'blog': 'blogRoute',          
      },
      homeRoute: function () {
          var homeView = new HomeView();          
          $("#content").html(homeView.el);
      },
      blogRoute: function () {
          var blogView = new BlogView();          
          $("#content").html(blogView.el);
      }
  });

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

   
Backbone.js Routing
<div>
    <a href="#/home">Home</a>
    <a href="#/blog">Blog</a> 
</div>    
<div id="content">
</div>

              
            
          
            
              

External resources loaded into this fiddle: