Logic on current state, previous and lifecycle

[Nacrylyc]

Hi!, nice work, small and they have all I need. So, I have some problem (not very big) with the lifecycle. I take your html example and I add, canLeave and canEnter callback function. I print the :

"this.name", "event.current.name" and "event.previous.name".

I navigate by the link on "home" after "contact" and I uptain :

canEnter: home. Current : home. Previous : 
enter: home. Current : home. Previous : 
canLeave: home. Current : contact. Previous : home
canEnter: contact. Current : contact. Previous : home
leave: home. Current : contact. Previous : home
enter: contact. Current : contact. Previous : home

1. If you look only "this.name" when you navigate from "home" to "contact", you are :

canLeave home, canEnter contact, leave home, enter contact.

In "my" logic, the canEnter contact and leave home must be inverse and we must have :

canLeave home, leave home, canEnter contact, enter contact.

It is look right? (sure in sync way)

2. If you look current state and previous state :

Clic on "home", in the canEnter event, the current state must be empty cause we don't are in the state home, but just ask for enter to it.

Clic on "contact" :

• on canLeave home event, the current state must be home and previous empty, we don't leave yet, just ask.
• on canEnter contact event, the current state must be empty we leave home but we don't enter to contact yet.
• on leave home (they must be before canEnetr see point 1), we are two choice, first, the current state must be empty and previous must be home or the second, current state must be home and previous empty. But I prefer the first choice for make a difference from enter to the state where the current is home and previous is empty.

This is look right to you? So if not, explain your logic for current, previous and this in the event. If yes, do you need some help, I can change the code and you validate it after.

Nacrylyc.

[leeluolee]

Hi, @Nacrylyc. Sorry for missing this issue.

canEnter canLeave are very different with enter and leave. you will find the event.phase === 'permission' in canLeave , but 'navigation' in leave. In fact, if you nav from a to b, the whole process is

1. permission: canLeave a -> canEnter b
2. navigation: leave a -> leave b。

If permission process is rejected. the navigation won't start. The url will back to old one. So, permission is a way to terminate the whole navigation.

That doesn't make sense If the process is canLeave a -> leave a -> canEnter b -> enter. beacuse you can just put your canLeave logic in leave , it also works .