Search code examples
aurelia

Aurelia page life cycle - order of execution in routing/rendering pipeline

What is the order of execution in Aurelia routing and rendering pipeline when application navigates from one URL to another?

Solution

  • There are two lifecycles:

    Router Lifecycle is:

    1. Previous Screen canDeactivate
    2. Next Screen is instantiated
    3. Next Screen canActivate
    4. Previous Screen deactivate
    5. Next Screen activate
    6. Next Screen is rendered.

    The Component Lifecycle is:

    When loaded:

    1. created
    2. bind
    3. attached

    When unloaded:

    1. detached
    2. unbind

    As to how this all goes together, simply adding each of these callbacks to two routed pages and logging the calls shows this:

    Previous Page canDeactivate
Next Page canActivate
Previous Page deactivate
Next Page activate
Next Page created
Next Page bind
Previous Page detached
Previous Page unbind
Next Page attached

    If we include the router hooks (steps) that were included in your original answer, then it looks like this:

    Previous Page canDeactivate
Authorize step
Next Page canActivate
Pre-activate step
Previous Page deactivate
Next Page activate
Pre-render step
Next Page created
Next Page bind
Post-render step
Previous Page detached
Previous Page unbind
Next Page attached

    I've included both as most applications won't have the hooks added.