The NavigationGuard component takes a boolean @shouldGuard and an optional string @message.

{{!-- app/components/my-component.hbs --}}
<NavigationGuard
  @shouldGuard={{true}}
  @message="This component is preventing navigation"
/>

By default, enabling @shouldGuard will set the onbeforeunload browser hook to prompt on URL changes or window/tab close. This message is not configurable.

To control route transitions within your Ember app, you will need to consume the service in your Router, or elsewhere in your app.

The navigation-guard service has a preventNav property that will be true when navigation should be prevented.

It also has a getMessage() method to retrieve the first message that triggered preventNav. If you want the last message instead, you can use getMessage({last: true}).

// app/router.js
import EmberRouter from '@ember/routing/router';
import { inject as service } from '@ember/service';

export default class Router extends EmberRouter {
  @service navigationGuard;

  ...

  willTransition(_oldRoute, _newRoute, transition) {
    super.willTransition(...arguments);
    if (
      this.navigationGuard.preventNav &&
      !window.confirm(
        this.navigationGuard.getMessage()
      )
    ) {
      transition.abort();
    } else {
      // Bubble the `willTransition` action so that
      // parent routes can decide whether or not to abort.
      return true;
    }
  }
}
...