Home/

...

/

Router Transitions

Router Transitions

In this lesson, you’ll learn which routers are activated in what order when a user visits an Ember website.

Stepping through a router transition

Analyzing exactly what happens when the user visits a URL that was created by a nested route is fundamental to understanding how nested routes set up a nested UI. This is probably one of the greatest “aha!” moments on your journey to Ember mastery. So, let’s see which routes are activated and in what order when a visitor of our site goes to /bands/pearl-jam/songs.

Before this, though, let’s adapt our code to the relationship between bands and songs. We create a Song class and a few instances and assign each song to its appropriate band:

The added code is highlighted and the removed code is commented.

Press + to interact
// app/routes/bands.js
import Route from '@ember/routing/route'; 
import { tracked } from '@glimmer/tracking';
class Band { 
  @tracked name;
  //  constructor(name) {
  constructor({ id, name, songs }) {
    this.id = id;
    this.name = name;
    this.songs = songs;
  } 
}
class Song {
  constructor({ title, rating, band }) {
    this.title = title;
    this.rating = rating ?? 0;
    this.band = band;
  } 
}
export default class BandsRoute extends Route { 
  model() {
    // return [
    //   new Band('Led Zeppelin'), 
    //   new Band('Pearl Jam'), 
    //   new Band('Foo Fighters'),
    // ];
    let blackDog = new Song({ 
      title: 'Black Dog', 
      band: 'Led Zeppelin', 
      rating: 3,
    });
    let yellowLedbetter = new Song({
      title: 'Yellow Ledbetter',
      band: 'Pearl Jam',
      rating: 4,
    });
    let pretender = new Song({ 
      title: 'The Pretender', 
      band: 'Foo Fighters', 
      rating: 2,
    });
    let daughter = new Song({ 
      title: 'Daughter', 
      band: 'Pearl Jam', 
      rating: 5,
    });
    let ledZeppelin = new Band({ 
      id: 'led-zeppelin',
      name: 'Led Zeppelin', 
      songs: [blackDog],
    });
    let pearlJam = new Band({
      id: 'pearl-jam',
      name: 'Pearl Jam',
      songs: [yellowLedbetter, daughter],
    });
    let fooFighters = new Band({ 
      id: 'foo-fighters',
      name: 'Foo Fighters', 
      songs: [pretender],
    });
  return [ledZeppelin, pearlJam, fooFighters];
  } 
}

Now, with all our data and class definitions updated, we can start inspecting the router transition in detail.

First, the implicit application route is entered, as we covered previously in the Routing chapter. Next, the router will start matching segments of the URL to the specified routes. The first URL segment to ...

Access this course and 1400+ top-rated courses and projects.