- EmberJS Tutorial
- EmberJS - Home
- EmberJS - Overview
- EmberJS - Installation
- EmberJS - Core Concepts
- Creating and Running Application
- EmberJS - Object Model
- EmberJS - Router
- EmberJS - Templates
- EmberJS - Components
- EmberJS - Models
- EmberJS - Managing Dependencies
- EmberJS - Application Concerns
- EmberJS - Configuring Ember.js
- EmberJS - Ember Inspector
- EmberJS Useful Resources
- EmberJS - Quick Guide
- EmberJS - Useful Resources
- EmberJS - Discussion
EmberJS - Redirecting
This is a URL redirection or forwarding mechanism, that makes a web page available for more than one URL address. Ember.js defines a transitionTo() method moves the application into another route and it behaves like link-to helper.
To redirect from one route to another route, define the beforeModel hook into the route handler.
Syntax
Ember.Route.extend ({ beforeModel() { this.transitionTo('routeToName'); } });
Example
The example given below depicts how to redirect from one route to another. Create a new route and name it as beforemodel and open the router.js file with the following code to define URL mappings −
import Ember from 'ember'; //Access to Ember.js library as variable Ember import config from './config/environment'; //It provides access to app's configuration data as variable config //The const declares read only variable const Router = Ember.Router.extend ({ location: config.locationType, rootURL: config.rootURL }); //Defines URL mappings that takes parameter as an object to create the routes Router.map(function() { this.route('posts', function() { this.route('beforemodel'); }); }); //It specifies Router variable available to other parts of the app export default Router;
Open the file beforemodel.js created under app/routes/ with the following code −
import Ember from 'ember'; export default Ember.Route.extend ({ beforeModel() { //open the beforemodel.hbs page to display the data this.transitionTo('beforemodel'); } });
Open the file beforemodel.hbs created under app/templates/ with the following code −
<h2>Hello...Welcome to Tutorialspoint!!!</h2> {{outlet}}
Output
Run the ember server and you will receive the following output −