Modifying URLs With Nested Routes
You’ll learn how to change URLs according to the requirements of the application in this lesson.
Changes in router.js
Here’s the command we used in Ember-CLI
in the previous lesson:
ember g route bands/band --path=':id'
It generates the following code in router.js
. The highlighted lines of code are the new generated code.
Press + to interact
// app/router.jsimport EmberRouter from '@ember/routing/router';import config from 'rarwe/config/environment';export default class Router extends EmberRouter {location = config.locationType;rootURL = config.rootURL;}Router.map(function() {this.route('bands', function() {this.route('songs');this.route('band', {path: ':id'});});});
So, let’s fix this up to have the following shape:
The removed code is commented and the newly added code is highlighted.
Press + to interact
// app/router.jsimport EmberRouter from '@ember/routing/router';import config from 'rarwe/config/environment';export default class Router extends EmberRouter {location = config.locationType;rootURL = config.rootURL;}Router.map(function () {this.route('bands', function () {// this.route('songs');// this.route('band', {// path: ':id'this.route('band', { path: ':id' }, function () {this.route('songs');});});});
By defining a dynamic segment, one that starts with a :
, as path
, our router now maps every possible band URL to a route object in our application. With this in place, the following paths are all mapped:
/
/bands
Access this course and 1400+ top-rated courses and projects.