opened
JCKodel
username_0
<!-- Before submitting an issue, please consult our docs (https://beta.ionicframework.com/docs/) and API reference (https://beta.ionicframework.com/docs/api/) -->

<!-- Please make sure you are posting an issue pertaining to the Ionic Framework. If you are having an issue with the Ionic Appflow services (Ionic View, Ionic Deploy, etc.) please consult the Ionic Appflow support portal (https://ionic.zendesk.com/hc/en-us) -->

<!-- Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/ -->

<!-- ISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION. -->

# Bug Report

**Ionic version:**
<!-- (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) -->
<!-- (For Ionic 2.x & 3.x issues, please use https://github.com/ionic-team/ionic-v3) -->
[x] **4.x** 4.0.0-rc.0

**Current behavior:**
<!-- Describe how the bug manifests. -->
I'm trying to implement a navigation guard, cancelling the navigation for a specific route (so I can popup a login page, for example).

The event is cancelled, but the router still navigates.

**Expected behavior:**
<!-- Describe what the behavior would be without the bug. -->
When I cancel the `ionRouteWillChange` event, the navigation should be cancelled.

**Steps to reproduce:**
<!--  Please explain the steps required to duplicate the issue, especially if you are able to provide a sample application. -->
Implement a `onIonRouteWillChange` and call `event.preventDefault()`.

**Related code:**

<!-- If you are able to illustrate the bug or feature request with an example, please provide a sample application via one of the following means:

A sample application via GitHub

StackBlitz (https://stackblitz.com)

Plunker (http://plnkr.co/edit/cpeRJs?p=preview)

-->
```
<ion-app>
    <ion-router useHash={true} onIonRouteWillChange={this.onRouteWillChange}>
        <ion-route url="/menu/:menuHash" component="page-menu" />
        <ion-route url="/test" component="page-test" />
    </ion-router>

    <ion-nav main />
</ion-app>
```

```
private onRouteWillChange(e: CustomEvent<RouterEventDetail>)
{
    console.warn("RouteWillChange");
    console.dir(e);

    if(e.detail.to.startsWith("/menu"))
    {
        console.warn("CANCELLING");
        e.preventDefault();
        e.stopImmediatePropagation();
        e.stopPropagation();
        return false;
    }
}
```

Console output:
```
/!\ RouteWillChange (for /)
/!\ RouteWillChange (for /menu/xxxx)
/!\ CANCELLING
```

**Other information:**
<!-- List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to fix, Stack Overflow links, forum links, etc. -->

**Ionic info:** 
<!-- (run `ionic info` from a terminal/cmd prompt and paste output below): -->

```
[WARN] You are not in an Ionic project directory. Project context may be missing.

Ionic:

   ionic (Ionic CLI) : 4.5.0

System:

   NodeJS : v10.13.0
   npm    : 6.4.1
   OS     : Windows 10
```
NOTE: It's a Ionic Core/StencilJS project
[4.0.0-rc.0] onIonRouteWillChange should be cancellable
issue
created
Silvest89
username_1
What about using the Ionic nav guards, ionViewCanEnter and ionViewCanLeave
comment
created
Silvest89
username_1
What about using ionViewCanEnter at the component level?
comment
created
JCKodel
username_0
There is no such thing in Ionic Core.

And that's not the issue. The issue is a cancellable event not cancelling anything (the fix is either cancel the navigation or mark the event as non cancellable).
comment
closed
manucorporat
username_2
issue
created
manucorporat
username_2
You can't cancel a URL change, but what you can do is to implement guards in the way of redirects to protect parts of your application.

```tsx
<ion-app>
    <ion-router useHash={true}>
        { this.isLoggedIn && <ion-route-redirect from="/menu*" to="/test" /> }
        <ion-route url="/menu/:menuHash" component="page-menu" />
        <ion-route url="/test" component="page-test" />
    </ion-router>

    <ion-nav main />
</ion-app>
```
comment