Checking for canDeactivate before navigateToRoute

Help Requests
1

Hi there,

I’m a beginner so bear with me if this is a silly question.

I have a VM ‘foo’ with canDeactivate implementation that is hardcoded to return false. In another VM called ‘bar’ I call navigateToRoute('baz'), and the behavior is as expected: the displayed view is still ‘foo’. But in the scope of ‘bar’ I don’t know what actually has happened.

When calling the navigateToRoute('baz'), how do I know if the navigation did not succeed?

Thanks for any help!

1 Like
2

It looks like it navigateToRoute returns a promise so you can check that happened as expected.

I put together an example gist.run

1 Like
3

I see, that’s interesting. I’m using TypeScript, and the editor tells me that navigateToRoute returns a boolean. Now that I tried it with an await I can see that this is an object that looks like the following in case of successful navigation:

{
	"completed": true,
	"output": undefined,
	"status": "completed"
}

and in case of failure (e.g. canDeactivate = false) it looks like this:

{
	"completed": false,
	"output": false,
	"status": "canceled"
}

I’ve replaced NOPE with ${navigationFailed.completed} in your gist to confirm that.

So I could make it work, but obviously my VS Code is not happy that I’m checking for nav.completed === true given that it thinks that nav is a boolean. Probably I need to update something…

Anyway, the root problem is resolved, thank you for your help!

4

hmm you’re right about the definition, I don’t know if the docs/typings just need updated? You might be able to extend the interface to replace it but that seems a bit wrong in the long term.

5

I’d say updating the type definition wouldn’t be too big of a deal. I’ve created a pull request for it: https://github.com/aurelia/router/pull/544

3 Likes