Route#transitionTo()

Transition the application into another route. The route may be either a single route or route path:

this.transitionTo('blogPosts');
this.transitionTo('blogPosts.recentEntries');

Optionally supply a model for the route in question. The model will be serialized into the URL using the serialize hook of the route:

this.transitionTo('blogPost', aPost);

If a literal is passed (such as a number or a string), it will be treated as an identifier instead. In this case, the model hook of the route will be triggered:

this.transitionTo('blogPost', 1);

Multiple models will be applied last to first recursively up the route tree.

App.Router.map(function() {
  this.route('blogPost', { path:':blogPostId' }, function() {
    this.route('blogComment', { path: ':blogCommentId', resetNamespace: true });
  });
});

this.transitionTo('blogComment', aPost, aComment);
this.transitionTo('blogComment', 1, 13);

It is also possible to pass a URL (a string that starts with a /). This is intended for testing and debugging purposes and should rarely be used in production code.

this.transitionTo('/');
this.transitionTo('/blog/post/1/comment/13');
this.transitionTo('/blog/posts?sort=title');

An options hash with a queryParams property may be provided as the final argument to add query parameters to the destination URL.

this.transitionTo('blogPost', 1, {
  queryParams: { showComments: 'true' }
});

// if you just want to transition the query parameters without changing the route
this.transitionTo({ queryParams: { sort: 'date' } });

See also replaceWith.

Simple Transition Example

App.Router.map(function() {
  this.route('index');
  this.route('secret');
  this.route('fourOhFour', { path: '*:' });
});

App.IndexRoute = Ember.Route.extend({
  actions: {
    moveToSecret: function(context) {
      if (authorized()) {
        this.transitionTo('secret', context);
      } else {
        this.transitionTo('fourOhFour');
      }
    }
  }
});

Transition to a nested route

App.Router.map(function() {
  this.route('articles', { path: '/articles' }, function() {
    this.route('new');
  });
});

App.IndexRoute = Ember.Route.extend({
  actions: {
    transitionToNewArticle: function() {
      this.transitionTo('articles.new');
    }
  }
});

Multiple Models Example

App.Router.map(function() {
  this.route('index');

  this.route('breakfast', { path: ':breakfastId' }, function() {
    this.route('cereal', { path: ':cerealId', resetNamespace: true });
  });
});

App.IndexRoute = Ember.Route.extend({
  actions: {
    moveToChocolateCereal: function() {
      let cereal = { cerealId: 'ChocolateYumminess' };
      let breakfast = { breakfastId: 'CerealAndMilk' };

      this.transitionTo('cereal', breakfast, cereal);
    }
  }
});

Nested Route with Query String Example

App.Router.map(function() {
  this.route('fruits', function() {
    this.route('apples');
  });
});

App.IndexRoute = Ember.Route.extend({
  actions: {
    transitionToApples: function() {
      this.transitionTo('fruits.apples', { queryParams: { color: 'red' } });
    }
  }
});