Shulou(Shulou.com)05/31 Report--

This article mainly explains "what is the initialization process of Matcher in Vue Router". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the initialization process of Matcher in Vue Router".

Initialization of MatchercreateMatcher ()

Understand several related concepts

1. Location type

A structured description of url. For example, url = "/ main?p1=1&p2=2222&p3=3333", its path is "/ main", and query is {p1path 1, p2path 222, p3path 333}.

Declare type Location = {_ normalized?: boolean; name?: string; path?: string; hash?: string; query?: Dictionary; params?: Dictionary; append?: boolean; replace?: boolean;} 2, rowLocation type declare type RawLocation = string | Location / / can also be string 3 or Route in addition to Location type

Represents a route, and attributes also include path, query, hash, and so on. The important thing is that mached represents all the matching RouteRecord objects.

Declare type Route = {path: string; name:? string; hash: string; query: Dictionary; params: Dictionary; fullPath: string; matched: Array; redirectedFrom?: string; meta?: any;} 4, RouteRecord type declare type RouteRecord = {path: string; regex: RouteRegExp; components: Dictionary; instances: Dictionary; / / represents an instance of the component an object type name:? string; parent:? RouteRecord; / / represents the parent RouteRecord redirect:? RedirectOption MatchAs:? string; beforeEnter:? NavigationGuard; meta: any; props: boolean | Object | Function | Dictionary;}

The matcher object provides two methods, match () and addRoutes ().

The function of addRoutes () is to add the routing configuration dynamically.

Match () calculates a new path based on the incoming raw of type rawLoction and the current path currentRoute and returns.

The realization of addRoutes ()

The goal of calling createRouteMap () is to convert the user's routing configuration into a route mapping table. Method traverses the routing configuration routes, and the return value is an object that includes pathList, pathMap, and nameMap.

PathList stores all path values, pathMap represents a mapping from path to RouteRecord, and nameMap represents a mapping from name to RouteRecord.

/ / record path and if (! pathMap [record.path]) {pathList.push (record.path) / / ['/ aaa/bbb','/cccc/ddd'] pathMap [record.path] = record / / pathvalue as key / aaa/bbb: {path: "/ aaa/bbb", regex: / /}}

Example of pathMap value

/ / record name to RouteRecord mapping; name value as keyif (name) {if (! nameMap [name]) {nameMap [name] = record} else if (process.env.NODE_ENV! = = 'production' & &! matchAs) {warn (false, `Duplicate named routes definition: `+` {name: "${name}", path: "${record.path}"} `)}}

The map obtained is the basis for route matching.

Match ()

The function is to match a path and find the mapped component.

Execution process

First normalizeLocation, get a standardized location description location {_ normalized: true, path: "/ foo", query: {}, hash: ""}

(1) when name exists, the routing record record is obtained from the nameMap through name, and then the parameters in the record record are processed. Pass the location, record, and vueRouter objects as parameters into createRoute () to generate a new route path.

(2) the name does not exist but the path value exists. Traverse the path set pathList, and the route is matched by the fetched record and location. If there is a match, generate a new path.

Matched attribute

In VueRouter, all Route is ultimately created by the createRoute function, and it cannot be modified externally. There is an important property matched in the Route object, which is calculated by formatMatch (record):

Function formatMatch (record:? RouteRecord): Array {const res = [] while (record) {res.unshift (record) record = record.parent} return res}

The record loop looks up for parent until you find the outermost layer. Put all the record in an array, which records all the record on a line. The matched property provides a basis for later rendering components.

Thank you for reading, the above is "what is the initialization process of Matcher in Vue Router". After the study of this article, I believe you have a deeper understanding of what the initialization process of Matcher in Vue Router is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.