In‑Depth Analysis of Vue‑Router Source Code and Dynamic Route Permission Implementation

The article begins with a brief background, stating that the author examined the Vue‑Router source to understand its multi‑layered function calls, this bindings, and auxiliary utilities, and also explores dynamic route permission handling in a student‑management demo.

Vue‑Router Source Analysis

Before reading the code, the author recommends cloning the Vue and Vue‑Router repositories and following the official documentation. The install function registers the plugin, adds lifecycle hooks ( beforeCreate and destroyed ), and makes $router and $route reactive on the Vue prototype.

The Vue.use(Router) call triggers src/core/global-api/use.js , which prevents duplicate plugin registration and invokes the plugin’s install method.

Matcher Creation

The createMatcher function builds three maps ( pathList , pathMap , nameMap ) via createRouteMap . Each route record stores the normalized path, compiled regex, component reference, meta data, and child routes. Recursive addRouteRecord handles nested routes, and addRoutes enables dynamic route addition.

Router Modes

Vue‑Router supports hash , history , and abstract modes. The constructor selects a mode based on browser capabilities, falling back to hash for older browsers and to abstract in non‑browser environments, then instantiates the appropriate history object.

Route Switching

In hash mode, push triggers transitionTo , which eventually calls pushHash and the native history.pushState (or replaceState ) to update the URL without a full page reload.

router‑view & router‑link

The router‑view component determines its depth, retrieves the matched route record, registers the component instance, and renders the appropriate component. The router‑link component resolves the target location, applies active classes, and renders an a tag (or a custom tag) with a click handler that calls router.push or router.replace .

Dynamic Route Permission Control

The article explains a typical permission flow: a JWT token is stored locally, the global beforeEach guard checks the token, fetches user roles, generates accessible routes via store.dispatch('permission/generateRoutes', roles) , and adds them with router.addRoutes . Routes are split into constantRoutes (public) and asyncRoutes (role‑restricted). The filterAsyncRoutes function keeps only routes whose meta.roles intersect with the user’s roles.

Finally, the author reflects on the benefits of reading source code for deepening JavaScript knowledge and avoiding common pitfalls.