Vue source code analysis (5)-Router

1. Installation process

1. Through the mixinglobal injection beforeCreatehook, injected when the component is initialized_routerRoot
2. Use Object.definepropertymounts $routerand $routeparameters
3. Global injection RouterViewand RoterLinkcomponents
4. Define merger strategy

2. Instantiate Router

1. Parse configuration generationmatcher
2. Judge the environment instantiation historyobject

3. Route Jump

1. The beforeCreatehook is triggered when the root component is instantiated , Routerthe initmethod called , binds the global routing monitoring event, performs the first routing jump and responsive processingthis._route
2. After triggering the route jump, execute Router.historythe jump method on
3. Analyze the route, extract the hook, execute the hook, confirm and update the route to trigger the response, modify url, trigger the afterhook
4. The next event loop responsively triggers view updates and renders new routing components

4. Route rendering

1. RouterViewThe renderfunction is defined internally , and executed every time it is re-rendered, routethe corresponding component will be parsed according to the current, and the corresponding component will be used to replace itself for rendering. If there is no component, it will be rendered as a comment node

The props method of routing parameters is to parse out the parameters after matching the components, and finally participate in the creation of the component's vnode in the form of component data to realize the props passing parameters.

2. RouterLinkInternally defined renderfunctions are executed each time it is re-rendered, events are defined according to the passed parameters, and finally rendered into alabels and bound to corresponding events