The Router DSL

Routes are declared in app/router.js with a small DSL that produces a nested tree of URLs and matching route files.

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

What you'll learn

Add top-level routes with this.route
Nest routes via a callback
Pass options like path and resetNamespace

app/router.js is the single source of truth for every URL your app responds to. The DSL is small but expressive.

Basic Routes

// 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');                 // /about
  this.route('contact');               // /contact
  this.route('signin', { path: '/login' });  // /login
});

this.route('about') produces the URL /about, looks up app/routes/about.js, and renders app/templates/about.hbs.

Nested Routes

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

Nesting produces parent + child file pairs and parent + child templates. The parent renders {{outlet}} to show its active child.

Reset Namespace

this.route('admin', function () {
  this.route('users', { resetNamespace: true });
});

By default admin.users is the route name. With resetNamespace: true it becomes just users — handy when many routes share a layout but you want short link names.

Route Files — Class & Hooks →