{{Quest 4}} — Ember.Route redirecting ‘/’ to ‘/my-own’

Level: Beginner

Credits: 301 redirect (images.google.com)

Ever wondered how do you set an initial route to be other than a ‘/’, say instead of http://localhost:4200, it has to be http://localhost:4200/dashboard ? Then this post is for you.

Ember.Route Class provides an event hook called redirect which according to the ember docs is as below:

A hook you can implement to optionally redirect to another route. If you call this.transitionTo from inside of this hook, this route will not be entered in favor of the other hook. redirect and afterModel behave very similarly and are called almost at the same time, but they have an important distinction in the case that, from one of these hooks, a redirect into a child route of this route occurs: redirects from afterModel essentially invalidate the current attempt to enter this route, and will result in this route's beforeModel, model, and afterModel hooks being fired again within the new, redirecting transition. Redirects that occur within the redirect hook, on the other hand, will not cause these hooks to be fired again the second time around; in other words, by the time the redirect hook has been called, both the resolved model and attempted entry into this route are considered to be fully validated.

So, how do we make use of this now? Yes! Straight-forward isn’t it? Below is the code gist to making it work and here is a working ember twiddle:

PS: Clap if you liked, and don’t forget to follow me here Abhilash L R or on Twitter @abhilashlr