A router is used to specify all the possible states of an app and map them to URLs while {{outlet}} tag is used to build a hierarchy of sections by providing a mean for a container template to include a child template.

In Ember.js, the Router is responsible for managing the application’s URL and transitioning between different application states, commonly known as routes. The Router maps URL patterns to route handlers, which in turn typically correspond to specific templates and controllers.

The {{outlet}} tag in Ember.js templates is a placeholder where the templates for nested routes are rendered. When you define nested routes in Ember.js, each nested route’s template is rendered within the {{outlet}} of its parent route’s template.

For example, consider the following router definition:

javascript

Router.map(function() {

  this.route('posts', function() {

    this.route('new');

    this.route('edit', { path: '/edit/:post_id' });

  });

});

In this case, the posts route has nested routes new and edit. When navigating to /posts, the template for the posts route will be rendered, and within that template, the {{outlet}} tag will render the template for either new or edit depending on the URL.

So, in summary:

The Router in Ember.js is responsible for managing application URLs and transitioning between different application states (routes).
The {{outlet}} tag in Ember.js templates is a placeholder where the templates for nested routes are rendered, allowing for dynamic content based on the current route.