> Markdown version of [Navigation Lifecycle](https://vaadin.com/docs/v14/flow/routing/tutorial-routing-lifecycle). Section index: [llms.txt](https://vaadin.com/docs/v14/flow/llms.txt)

# Navigation Lifecycle

The navigation lifecycle is made up of a number of events that are fired when a user navigates in an application from one state or view to another.

The events are fired to listeners added to the `UI` instance and to attached components that implement related *observer* interfaces.

## <a id="beforeleaveevent"></a>BeforeLeaveEvent

`BeforeLeaveEvent` is the first event fired during navigation.

The event allows the navigation to be postponed, canceled, or changed to a different destination.

This event is delivered to any component instance implementing `BeforeLeaveObserver` that is attached to the UI before the navigation starts.

It is also possible to register a standalone listener for this event using the `addBeforeLeaveListener(BeforeLeaveListener)` method in `UI`.

A typical use case for this event is to ask the user whether they want to save any unsaved changes before navigating to another part of the application.

### <a id="postpone"></a>Postpone method

`BeforeLeaveEvent` includes the `postpone` method that can be used to postpone the current navigational transition until a specific condition is met.

**Example**: The client requests the user’s confirmation before leaving the page:

```java
public class SignupForm extends Div
        implements BeforeLeaveObserver {
    @Override
    public void beforeLeave(BeforeLeaveEvent event) {
        if (this.hasChanges()) {
            ContinueNavigationAction action =
                    event.postpone();
            ConfirmDialog.build("Are you sure you want"+
                    " to leave this page?")
                    .ifAccept(action::proceed)
                    .show();
        }
    }

    private boolean hasChanges() {
        // no-op implementation
        return true;
    }
}
```

Postponing interrupts the process of notifying observers and listeners. When the transition resumes, the remaining observers (those after the observer that initiated the postpone) are called.

**Example**:

- Assume the current page has 3 observers, `a`, `b` and `c`, which are notified in the same order.

- If `b` calls `postpone`, the call to `c` (and the rest of the transition process), is deferred.

  - If the transition is not resumed, `c` is never notified of the event and the transition never finishes.

  - If `b` executes `ContinueNavigationAction` to resume the transition, it continues from the point of interruption: `a` and `b` are not called again, but `c` is notified.

> **Note:** Only one navigation event may be postponed at a time. Starting a new navigation transition, while a previous one is in a postponed state, makes the postponed state obsolete, and executing `ContinueNavigationAction` has no effect.

## <a id="beforeenterevent"></a>BeforeEnterEvent

`BeforeEnterEvent` is the second event fired during navigation.

The event allows you to change the navigation to go to a destination that is different from the original.

This event is typically used to react to special situations, for example if there is no data to show, or if the user does not have appropriate permissions.

This event is delivered to any component instance implementing `BeforeEnterObserver` that is attached to the UI starting from the UI moving through the child components.

> **Note:** Components in the chain are instantiated after a parent handles `BeforeEnter` and doesn’t [reroute](#rerouting) or [forward](#forward)

The event is fired:

- Only after a [`postpone`](#postpone) (called during a `BeforeLeaveEvent`) has been continued.

- Before detaching and attaching components to make the UI match the location being navigated to.

It is also possible to register a standalone listener for this event using the `addBeforeEnterListener(BeforeEnterListener)` method in `UI`.

### <a id="rerouting"></a>Rerouting

Both [`BeforeLeaveEvent`](#beforeleaveevent) and [`BeforeEnterEvent`](#beforeenterevent) can be used to reroute dynamically.

Rerouting is typically used when there is a need to show completely different information in a particular state.

When the `reroute` method is called:

- The event is not fired to any further listeners or observers.

- The method triggers a new navigation phase, based on the new navigation target, and events are fired based on this instead.

- For [BeforeEnterEvent](#beforeenterevent): Child components of the rerouting component are not instantiated.

**Example**: Rerouting when entering a `BlogList` with no results.

```java
@Route("no-items")
public class NoItemsView extends Div {
    public NoItemsView() {
        setText("No items found.");
    }
}

@Route("blog")
public class BlogList extends Div
        implements BeforeEnterObserver {
    @Override
    public void beforeEnter(BeforeEnterEvent event) {
        // implementation omitted
        Object record = getItem();

        if (record == null) {
            event.rerouteTo(NoItemsView.class);
        }
    }

    private Object getItem() {
        // no-op implementation
        return null;
    }
}
```

> **Note:** There are several `rerouteTo` overload methods that can be used for different use cases.

### <a id="forward"></a>Forward

The `forwardTo` method [reroutes](#rerouting) navigation and updates the browser URL.

Forwarding can be used during [BeforeEnter](#beforeenterevent) and [BeforeLeave](#beforeleaveevent) lifecycle states to dynamically redirect to a different URL.

When the `forwardTo` method is called:

- The event is not fired to any further listeners or observers.

- The method triggers a new navigation phase, based on the new navigation target, and fires new lifecycle events for the new forward navigation target.

- For [BeforeEnterEvent](#beforeenterevent): Child components of the forwarding component are not instantiated.

**Example**: Forwarding when viewing `BlogList` without the required permissions.

```java
@Route("no-permission")
public class NoPermission extends Div {
    public NoPermission() {
        setText("No permission.");
    }
}

@Route("blog-post")
public class BlogPost extends Div
        implements BeforeEnterObserver {
    @Override
    public void beforeEnter(BeforeEnterEvent event) {
        if (!hasPermission()) {
            event.forwardTo(NoPermission.class);
        }
    }

    private boolean hasPermission() {
        // no-op implementation
        return false;
    }
}
```

> **Note:** `forwardTo` has several overloads that serve different use cases.

## <a id="afternavigationevent"></a>AfterNavigationEvent

`AfterNavigationEvent` is the third and last event fired during navigation.

This event is typically used to update various parts of the UI after the actual navigation is complete. Examples include adjusting the content of a breadcrumb component and visually marking the active menu item as active.

The event is fired:

- After [`BeforeEnterEvent`](#beforeenterevent), and

- After updating which components are attached to the UI.

At this point, the current navigation state is actually shown to the user, and further reroutes and similar changes are no longer possible.

The event is delivered to any component instance implementing `AfterNavigationObserver` that is attached after completing the navigation.

It is also possible to register a standalone listener for this event using the `addAfterNavigationListener(AfterNavigationListener)` method in UI.

**Example**: Marking the active navigation element as active.

```java
public class SideMenu extends Div
        implements AfterNavigationObserver {
    Anchor blog = new Anchor("blog", "Blog");

    @Override
    public void afterNavigation(
          AfterNavigationEvent event) {
        boolean active = event.getLocation()
                .getFirstSegment()
                .equals(blog.getHref());
        blog.getElement()
                .getClassList()
                .set("active", active);
    }
}
```

`F26410EF-9E39-4A1D-B944-8FB86F4DED3F`