This is the 16th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

VueRouter object

VueRouter’s implementation is a class, and we’ll start with a brief analysis of it, defined in SRC /index.js. VueRouter defines some properties and methods, but let’s start with its constructor to see what we did when we executed new VueRouter.

constructor (options: RouterOptions = {}) { this.app = null this.apps = [] this.options = options this.beforeHooks = [] this.resolveHooks = []  this.afterHooks = [] this.matcher = createMatcher(options.routes || [], this) let mode = options.mode || 'hash' this.fallback = mode === 'history' && ! supportsPushState && options.fallback ! == false if (this.fallback) { mode = 'hash' } if (! inBrowser) { mode = 'abstract' } this.mode = mode switch (mode) { case 'history': this.history = new HTML5History(this, options.base) break case 'hash': this.history = new HashHistory(this, options.base, this.fallback) break case 'abstract': this.history = new AbstractHistory(this, options.base) break default: if (process.env.NODE_ENV ! == 'production') { assert(false, `invalid mode: ${mode}`) } } }Copy the code

The constructor defines attributes, where this.app represents the root Vue instance, this.apps holds the Vue instance that holds the $options.router attribute, this.options holds the incoming route configuration, BeforeHooks, this.resolveHooks, this.afterHooks represent some hook functions, which we’ll cover later, and this.matcher represents route matchers, which we’ll cover later. This. Fallback indicates whether to revert to hash mode if history.pushState is not supported by the browser. This. History represents a specific implementation of the route history, which varies depending on the implementation of this.mode, which has the history base class, and which implementations inherit history.

The new VueRouter will return the router as the configuration attribute for the new VueRouter. The new VueRouter will return the router as the configuration attribute for the new Vue.

beforeCreate() { if (isDef(this.$options.router)) { // ... this._router = this.$options.router this._router.init(this) // ... }}Copy the code

Therefore, when executing the beforeCreate hook function, the component will execute router.init if the router instance is passed in. The logic of init is simple: it passes in a Vue instance and stores it in this.apps; Only the root Vue instance will be saved to this.app and will get the current this.history, which will perform different logic depending on its type. The setupHashListener function is defined, followed by the history.transitionTo method, which is defined in the history base class. The code is SRC /history/base.js:

transitionTo (location: RawLocation, onComplete? : Function, onAbort? : Function) { const route = this.router.match(location, this.current) // ... }Copy the code

The this.matcher.match method is actually called to do the matching.

conclusion

During component initialization, the router.init method is executed on the beforeCreate hook function, and the history.transitionTo method is executed on the router.