Ember.js : Custom "index" route's path and Custom "/" path's route

"index" Route

The index route, which will handle requests to the root URI (/) of our site.
How to generate a new route called index:
ember g route index
The index route is special: it does NOT require an entry in the router's mapping.

a Nested "index" Route

An index nested route works similarly to the base index route. It is the default route that renders when no route is provided. Use 'rentals' as example, when we navigate to /rentals, Ember will attempt to load the rentals index route as a nested route.
To create an index nested route, run the following command:
ember g route rentals/index

If you open up your Router (app/router.js) you may notice that the rentals line has changed. This extra function() {} is required because it needs a child route, the this.route('index', { path: '/'}); is implied.

Router.map(function() {
  this.route('rentals', function() {
    // implied code
    // this.route('index', { path: '/'});

replaceWith and transitionTo

Use "replaceWidth" and "transitionTo", We can simply forward "/" to the "rentals" route. You will found the url displayed in url bar will changed from "http://localhost" to "http://localhost/rentals".
Well, everything is fine here except one little fault.
I do not want this redirect from "/" to "/rentals".
I hope it always be "/".
Can we make it ?

Is "index/index" possible ?

I tried below command:

ember g route index/index
installing route
  create app/routes/index/index.js
  create app/templates/index/index.hbs
updating router
  add route index/index
installing route-test
  create tests/unit/routes/index/index-test.js

Command execute without errors, but blank page showed with "http://localhost".
It seems not work. Then I remember the impled code:
this.route('index', { path: '/'});

However, you can add the index route if you want to customize it. For example, you can modify the index route's path by specifying this.route('index', { path: '/custom-path'}).

Custom "index" route's path

We can custom "index" route's path by the impled code.
I guess We can custom the path's route also.
this.route('rentals', {path:'/'});
Ember server will handle requests to the root URI (/) to route "rentals" rather than the default "index" route now.
Can it works ? Let's try

Custom path's route

I use super-rentals as a example.
First I destroy "index" route.
ember d route index

Modify the app router.

git diff app/router.js
diff --git a/app/router.js b/app/router.js
index 254d53d..9f14d85 100644
--- a/app/router.js
+++ b/app/router.js
@@ -9,7 +9,7 @@ const Router = EmberRouter.extend({
 Router.map(function() {
-  this.route('rentals', function() {
+  this.route('rentals', {path:'/'}, function() {
     this.route('show', { path: '/:rental_id' });

Modify templates, all link to "index" replaced with "rentals".

-  {{#link-to 'index' class="button"}}
+  {{#link-to 'rentals' class="button"}}

ember serve
I got what I wished.
The url bar is clean now.
Only "http://localhost", no "rentals" anymore.


Routes and templates
Adding Nested Routes

Subscribe to Post, Code and Quiet Time.

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.