Vue – the router source code

Front-end routes and back-end routes

• Back-end routing-MVC: Enter the URL, send the request to the server, resolve the path of the request, get the corresponding page, and return to the server
• Front-end routing – SPA: enter URL “JS resolution address” find the corresponding address of the page “execute the page generated JS” see the page

Vue-router workflow

• Url change “trigger listener event” change current variable in vue-router “monitor current variable monitor” get new component “render new component

Routing patterns

hash

• After the # sign
• You can get it from location.hash
• Listen for changes through onhashchange
• Only routes are routed to the server, and no jumps occur

history

• Get the path via location.pathname
• Listen for history changes through onPopState

Vue.use

• If a function is passed in, the function is executed
• If install for a function/object is a method, the method is executed in preference to the function itself

Function a() {console.log(' function's own method '); } a.install = function () {console.log('install '); } vue.use (a)//install methodCopy the code

• Vue.use() passes a Vue class to the install method (all Vue classes are equal).

• This class has a mixin method underneath it.

A. install = function (Vue) {Vue. Mixin ({data(){return{// all components can call this name name:" ZXX "}}})}Copy the code

• The most important thing is that you can mix in the lifecycle function and get the this of each component

// This created(){console.log(this); }Copy the code

• Vue has a series of utils, and here are some methods

• And these methods are exposed and can be used directly
• DefineReactive is the method of the data response principle

Var test={testa:1} var ue.util.definereactive (test,'testa') var test={testa:1} Test.testa =333},2000) a.install = function (Vue) {Vue. Mixin ({this.test=test}, created(){ } }) }Copy the code

• Put it on beforeCreate because this has not been created yet, and put it on Created because this has already been created
• In fact, the single test found that the two inside the same, can work normally

code

class History { constructor() { this.current = null } } class VueRouter { constructor(options) { this.mode = options.mode || 'hash'; this.routes = options.routes || []; this.history = new History; RoutesMap = this.createmap (this.routes) this.init()} init() {if (this.mode === 'hash') {if (this.mode === 'hash') { Change to // / if true, execute '' without changing anything location.hash? '' : location.hash = '/'; window.addEventListener('load', () => { this.history.current = location.hash.slice(1) }) window.addEventListener('hashchange', () => { this.history.current = location.hash.slice(1) }) } else { location.pathname ? '' : location.pathname = '/'; window.addEventListener('load', () => { this.history.current = location.pathname }) window.addEventListener('popstate', () => { this.history.current = location.pathname }) } } createMap(routes) { return routes.reduce((prev, item) => { prev[item.path] = item.component return prev }, {})}} VueRouter. Install =function(Vue){vuue. BeforeCreate () {if (this.$options && this.$options.router) {this._root = this; this._router = this.$options.router Vue.util.defineReactive(this, 'current', this._router.history) } else { this._root = this.$parent._root } } }) Vue.component('router-view', { render(h) { let current = this._self._root._router.history.current; console.log(current); let routesMap = this._self._root._router.routesMap console.log(routesMap); return h(routesMap[current]) } } ) } export default VueRouterCopy the code