The article is mainly based on the code comments in the pictures, and the text only describes the general idea. There may be some very detailed points that are not analyzed, because the VueRouter source code was analyzed mainly to study why router-link, router-view and front-end routing are associated. Find out how The VueRouter works. After understanding the whole VueRouter, specific details can be dealt with in combination with practical problems in the work.

The plug-in registry

In the article of Vuex analysis, there is an analysis of plug-in functions (juejin.cn/user/208432…

Vue.use

Cn.vuejs.org/v2/api/#Vue…

install

1. Add a static attribute called Installed to the install function to prevent multiple installs of the plug-in

2. Call vue. mixin and mix the beforeCreate and deStoryed methods globally.

In the beforeCreate method, the descendants of the root component (app.vue) can access the VueRouter instance of the root component through the parent-child relationship between components.

2.2 Call the init method of VueRouter instance.

2.2 Add the _route attribute to the root component using the vue.util. defineReactive method. The value is the current route address of the Vue application, which drives the view change based on the change of the [current route address].

3. Add router attributes and Router attributes as well as Router attributes and route attributes to the prototype chain of Vue, both of which are [read-only] attributes. The value of router is VueRouter instance. The value of router is VueRouter instance. The value of router is VueRouter instance.

4. Register the RouterView and RouterLink components

5. BeforeRouter beforeRouteLeave/beforeRouterUpdate merger strategy and created the merger of the strategy.

this._router.init(this)

VueRouter controls the scroll axis. Init does: 1) Listen for scroll events; 2) You can pass router to multiple components, but make sure you don’t listen for scorll events repeatedly.

new VueRouter

Let’s go straight to the constructors, the main ones being the createMatcher method and the history instance.

1. The VueRouter routing mode generally consists of two hash modes and HTML5 modes, of course, this is on the browser side. There is also the Abstract mode in a non-browser environment.

2. CreateMatcher method. Returns the addRouters and Matcher methods. These two methods are at the heart of VueRouter’s approach.

createMatcher

Before analyzing the createMatcher method, let me give you some basic information. Having this information will give you a better idea of how The VueRouter works.

Vue buckets are developed using Facebook flow. Here are a few types.

When I analyzed the source code of VueRouter, there was a confusing place to write, which was record and location. And I found out that there were different uses for all of these. And the types are declared in the flow.

The most important thing to note here is that the RouteRecord type (which corresponds to the record variable in the source code) contains the components attribute, which must be a Vue component.

The Route type (corresponding to the variable Route in the source code) contains the matched attribute, whose value is an array of a series of records with a parent-child relationship.

RawLocation(raw in the source code) is a string or Route type and is the destination of a Route.

Now formally analyze the createMatcher method

1. Pass the user-defined routes into the createRouteMap function to obtain the array pathList of all the user-defined routes. Path is a key and route is a pathMap consisting of values. Name is the key and route is the nameMap

2. Define the addRoutes method, the core of which is to call the createRouteMap method (pass in the old pathList, pathMap, nameMap).

3. Define the match method

1. CreateRouteMap addRouteRecord

1. CreateRouteMap calls the addRouteRecord method by iterating through the user-defined route array.

2. The user can pass in wildcard * to ensure that * appears at the end of the pathList array

addRouteRecord

1. Standardize user-defined paths

2. Define the Record object, which contains the components object. Normally we use component instead of components in our custom route. Value indicates the component imported by the user

3. If the custom route has the children attribute, the addRouteRecord function is recursively called through the child elements

4. PathMap object, pathList array to add elements (the same key will not be added twice)

5. If you have defined an alias value, take the user-defined alias as path and run the addRouteRecord function again

6. If the user has defined the value of name, add the element to the nameMap attribute. So specially looked at this aspect of the source code, in fact, as long as the development of each routing address has a unique name value, there will be no problem. Issure address 🙂

7. The function returns no value because the passed pathList, pathMap, and nameMap are reference objects

2.  addRoutes

PathList, pathMap, and nameMap are reference objects whose values are generated when the route is created for the first time.

We can add routes dynamically. When adding routes dynamically, the problem of adding routes with the same name may occur repeatedly. This problem has been described in detail in Part 1 and will not be repeated.

3. match

The match method takes three parameters: the path to jump to, the current path, and the redirection parameter

1. NormalizeLocation obtains the standardized target path based on the jump path and the current path, which is of the Location type

2. If the standardized path object to jump has name attribute, directly obtain the record corresponding to name and create an object of route type to return

Select * from record where path = route; select * from record where path = route

4. Return an empty route object if there is neither name nor path

Note: When jumping, you can pass in the name attribute, which has a higher priority than path/alias

4. _createRoute与createRoute

The _createRoute function is used for objects of the common route type described in the previous section, according to record.

We’ll skip redirect and alias and focus on the createRoute method

The matched property of the route is the most important one in the createRoute method. If a record object is matched after the match function is executed, the formatMatch function returns the value and assigns it to the matched property.

5. formarMatch

In fact, formatMatch is very simple, there is a parent-child relationship in the user defined routes object, and there is also an ax relationship between records, so the value of the route type matched attribute is an array of record types, array index is the ancestor from 0. The last one is the matched record.

This foreshadowing occurs again in the RouterView component.

The last

The essay will be divided into 3-4 parts.

This article starts with the installation and initialization of a component. The types of Location, record, raw and route are introduced to lay a foundation for subsequent analysis.

Then the addRoutes and match methods are analyzed. AddRoutes is adding user-defined routes to pathList, pathMap, nameMap objects. Match is a route object based on the incoming destination route and the current path, which involves location, record, raw, route several types of value, after the introduction of the previous type will be easier to understand.

The next article will examine the History class.