Route Files — Class & Hooks

A route file extends Route and defines lifecycle hooks for redirects, data loading, and post-load work.

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

What you'll learn

Generate a route with ember g route
Implement model() to load data
Use beforeModel for redirects and auth checks

A route in app/router.js is just a declaration. The behavior lives in app/routes/<name>.js, a class extending Route.

Generate It

ember g route posts
# creates app/routes/posts.js, app/templates/posts.hbs, plus a test

Lifecycle Hooks

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

export default class PostsRoute extends Route {
  @service store;
  @service auth;
  @service router;

  beforeModel(transition) {
    if (!this.auth.isLoggedIn) {
      this.router.transitionTo('signin');
    }
  }

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

  afterModel(posts) {
    document.title = `Posts (${posts.length})`;
  }
}

The order is: beforeModel → model → afterModel. If any returns a Promise, Ember waits before continuing.

setupController & resetController

setupController(controller, model) {
  super.setupController(controller, model);
  controller.set('viewedAt', new Date());
}

resetController(controller, isExiting) {
  if (isExiting) controller.set('search', '');
}

setupController hands model() results to the controller; resetController runs when leaving — perfect for clearing query-param filters.

Dynamic Segments →