Routes — The Backbone of Ember

Ember routes own the URL, the data model, and the template — the central concept of an Ember app and the reason for its conventions.

4 min read Level 2/5 #ember#routes#routing

What you'll learn

See the router.js DSL in action
Recognize the route file naming pattern
Understand model() as the data hook

In Ember, the URL is the source of truth. Every screen is a route, and each route owns three things: the URL, the data, and the template. Routes are why Ember scales.

The Router DSL

// app/router.js
import EmberRouter from '@ember/routing/router';
import config from 'my-app/config/environment';

export default class Router extends EmberRouter {
  location = config.locationType;
  rootURL = config.rootURL;
}

Router.map(function () {
  this.route('about');
  this.route('posts');
  this.route('post', { path: '/posts/:id' });
});

Each this.route() produces a URL, a route file, and a template slot.

The Route File

// app/routes/posts.js
import Route from '@ember/routing/route';
import { service } from '@ember/service';

export default class PostsRoute extends Route {
  @service store;

  async model() {
    return this.store.findAll('post');
  }
}

The model() hook is async-aware: Ember waits for the Promise before rendering. The resolved value is exposed to the template as @model.

The Template

{{! app/templates/posts.hbs }}
<h1>Posts</h1>
<ul>
  {{#each @model as |post|}}
    <li><LinkTo @route="post" @model={{post.id}}>{{post.title}}</LinkTo></li>
  {{/each}}
</ul>

URL, data, template — bound together by convention, with zero wiring.

Templates — Handlebars With Power-Ups →