Ember.js routing: how do you set a default route to render immediately?

Question

I\'m sure this will become clear as I dig in deeper, but for now it\'s not obvious how to make this happen.

I was following the info on this helpful SO article about ro

Answer 1

It seems this is done diffently now. I had success with this way of doing it:

App = Ember.Application.create();

App.Router.map(function() {
  // 'index' route is default
  this.resource('dashboard');
});

App.IndexRoute = Ember.Route.extend({
    redirect: function() {
        // this redirects / to /dashboard
        this.transitionTo('dashboard');
    }
});

App.DashboardRoute = Ember.Route.extend({
});

Answer 2

You can make a redirect from the index to the home route:

// Default route
$(function() {
    App = Em.Application.create();

    // Instantiated and wired up for you in App.initialize()
    App.ApplicationController = Em.Controller.extend();
    App.ApplicationView = Em.View.extend({
        templateName: 'application'
    });
    
    App.NavController = Em.Controller.extend({});
    App.NavView = Em.View.extend({ templateName: 'nav' });
    
    App.HomeController = Em.Controller.extend({});
    App.HomeView = Em.View.extend({ templateName: 'home' });
    
    App.ProfileController = Em.Controller.extend({});
    App.ProfileView = Em.View.extend({ templateName: 'profile' });
    
    App.Router = Em.Router.extend({
        enableLogging: true,
        location: 'hash',

        root: Em.Route.extend({
            goHome: Ember.State.transitionTo('home'),
            goProfile: Ember.State.transitionTo('profile'),
            
            index: Em.Route.extend({
                route: '/',
                redirectsTo: 'home'
            }),

            home: Em.Route.extend({
                route: '/home',

                connectOutlets: function(router, context) {
                    router.get('applicationController').connectOutlet({
                        name: 'home'
                    });
                }
            }),
            
            profile: Em.Route.extend({
                route: '/profile',

                connectOutlets: function(router, context) {
                    console.log("enter");
                    router.get('applicationController').connectOutlet({
                        name: 'profile'
                    });
                }
            })
        })
    });

    App.initialize();
});

<script type="text/x-handlebars" data-template-name="application">
    {{view App.NavView controllerBinding="controller.controllers.navController"}}
    <hr />
    <div class="content">
        {{outlet}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="nav">
    <h1>navigation:</h1>
    <button {{action goHome}}>home</button>
    <button {{action goProfile}}>profile</buton>
</script>

<script type="text/x-handlebars" data-template-name="home">
    <h1>Home...</h1>
</script>
<script type="text/x-handlebars" data-template-name="profile">
    <h1>Profile...</h1>
</script>

Answer 3

With Ember CLI, you can put the redirect in index.js in your root of routes directory:

import Ember from 'ember';

export default Ember.Route.extend( {
  redirect: function() {
    this.transitionTo('dashboard');
  }
});