I had a hard time with nested routes the first time, so I hope to clear it up for others. Let's start with the following router:

App.Router.map(function(){
  this.resource('posts', function(){
    this.route('hello');
  });
});

In order to get to the root path we need to go to #/posts. The Router gives us some named routes which we can use with the Handlebars linkTo method or Ember's transitionTo method. Ember has done a great job of removing boiler plate code for us.

What tripped me up is that when you define a resource, Ember will automatically use two templates (if given). The first you can think of as the "root" view. Additionally, following CRUD, it will also use an "index" view. If you aren't going to have subviews then you could just use one template, but if you want multiple subviews (show and edit for example) then you'll want to put an {{outlet}} inside the template in order for the subviews to be rendered there.

Additionally if we want to have the default route (/) go to our posts we can do that with:

App.IndexRoute = Em.Route.extend({
  redirect: function() {
    this.transitionTo('posts');
  }
});

If you want to see what routes you have (and their names) then in the JS console of your app type:

App.Router.router.recognizer.names