"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 indexThe 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/indexIf 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('about');
this.route('contact');
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:Command execute without errors, but blank page showed with "http://localhost".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
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 indexModify 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('about');
this.route('contact');
- 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 serveI got what I wished.
The url bar is clean now.
Only "http://localhost", no "rentals" anymore.
Refers
Routes and templatesAdding Nested Routes
