When you click a link or button, you will navigate to Userthe component and the corresponding user ID will be displayed.
Let’s talk about the execution process here. When clicking a router-link, Vue Router will execute the following process:
1) Click event trigger : When you click on router-linkthe component, a click event will be triggered.
2) Vue Router interception : Vue Router will intercept this click event and prevent the browser from jumping to the default page.
3) Parse the target route : Vue Router will parse router-linkthe toattribute, which specifies the path of the target route or a named route.
4) Matching routing rules : Vue Router will match the parsed target route with the rules in the routing configuration to determine which route will eventually go to.
5) Check permissions and execute hook functions : If the target route involves permission control or uses a routing hook function (such as beforeEnter), Vue Router will perform these operations in sequence to decide whether to allow navigation.
6) Execute route jump : If everything is normal, Vue Router will perform page switching operations based on the matched target route.
7) Rendering components : The components of the target route will be rendered into the page.
8) Execute life cycle hooks : If the component of the target route defines life cycle hook functions (such as created, mountedetc.), these hook functions will be called in sequence.
In short, clicking on a router-linkwill trigger the navigation process of Vue Router. This process includes a series of operations such as route matching, permission verification, execution of hook functions, etc., and finally renders the target component to the page.