why is the code in beforeRouteEnter's next callback function called before mounted hook-CodePudding

in my memory, mounted hook is called at first, and then next callback function in beforeRouteEnter execute. The vue router document also say that, this is the url: Navigation Guards.

but when I test, the result is not right. This is the codesanbox url: demo.

As you see, the log in beforeRouteEnter next callback is logged at first.

demo

CodePudding user response：

I'm not sure where you saw that beforeRouteEnter should be called after mounted.

As you've linked yourself, the order is:

[...]
7 Call beforeRouteEnter in activated components
[...]
9 Navigation confirmed

When the navigation is confirmed, you will actually enter the usual lifecycle of a component being created mounted, as usual.
So, you'll move from one component, call the beforeRouteEnter guard and then, have another component mounted as expected.

CodePudding user response：

You are At Home view, and you want to go to About for example. BeforeRouteEnter will Happen before About view is created. For example if you need somethnig from Home you can put it at BeforeRouteLeave property TO(it is not written witch capitals) and you can use it at About view at BeforeRouteEnter as FROM(it is not written witch capitals).