What is the difference between home route and home/index route

1

I have seen both home.js route file amd home/index.js route. What exactly are the differences and similarities of those 2 files?

2

So in the docs it says:

At every level of nesting (including the top level), Ember automatically provides a route for the / path named index

This means this this:

Router.map(function() {
  this.route('posts', function() {
    this.route('favorites');
  });
});

is actually the equivalent of this:

Router.map(function() {
  this.route('index', { path: '/' });
  this.route('posts', function() {
    this.route('index', { path: '/' });
    this.route('favorites');
  });
});

As you can see there are two “index” routes automatically generated. In the case above if you visit <app url>/you will be visiting the top level “index” route. If you visit <app url>/posts you will be visiting the nested index route, aka “posts.index”. Now let’s say you put a route and template in for “favorites”. Then later you wanted to add a child route to “favorites”, let’s say “super-favorites”. You’d want to move the template you had for “favorites” (/app/templates/posts/favorites.hbs) into (`/app/templates/posts/favorites/index.hbs") because then when you visit “/posts/favorites” it will still render the same template.

The other thing to be conscious of when nesting routes is UI. Generally when a route is nested two things then become nested: the url paths and the templates. In the example above when you visit the “posts.favorites” OR “posts.index” route, anything that’s in those templates will render inside the “posts” template (in the {{outlet}}).

Anyway… hope that helps answer your question. Let me know if you have any follow-ups!

1 Like
3

@dknutsen suppose in my app I have a route called account and some nested routes as well. If I want to make account an engine then how would I be able to call the account.js route file (since it does some setup works for the nested routes to work). I don’t want to keep account folder within the engine instead what I did is I moved all nested routes into the engine and created an index.js file which will do the job of account.js. But that is not working. How to fix that?

4

If I want to make account an engine then how would I be able to call the account.js route file (since it does some setup works for the nested routes to work).

If you want to make “account” and all sub routes an engine I would make the original account.js route the engine’s “application” route. Just like the main ember app each engine has an application route which loads before all other routes and is kinda like the “main engine container route” if you will.

1 Like