In the afternoon, router.push is used when writing the route jump, which returns a Promise instance.
Then open the source code to take a look
The push method can take three arguments and return a promise if the last two callbacks are not specified.
It is then a matter of when resolve and reject are called, and a look at the code (hash mode for example) shows that the transitionTo method is passed in.
Combined with the analysis of the second article, juejin.cn/post/687347…
To further refine the execution order, during navigation validation, the route changes first and then the view rendering is triggered. The promise is resolved immediately after the trigger. Return route object in onResolved state.
nextTick
Here’s another example of why DOM updates occur after all navigation has been triggered in the full navigation parsing process. The value of route is dependent on the component’s rendering watcher, so when route is more appropriate, it triggers the re-execution of the rendering Watcher. The render Watcher will be pushed into the update queue. The update action is stored in a global array by the nextTick function.
Therefore, this round of tick only triggers the navigational guard, not the view update. In addition, the component instance can be fetched from the beforeRouteEnter guard within the component. The nextTick function is also used to ensure that the guard gets an updated instance.
The last
Long-term update….. , will put together in this article some of the things that came to mind during development or difficulties encountered with routing.
Event loops with Vue asynchronous updates (code comments) : juejin.cn/post/685703…
Vue watcher and Users Watcher: juejin.cn/post/685750