Article content output source: pull hook big front-end high salary training camp

A normal ES6 class

There is a special static method called Install

Parameters: (Vue)

  • Vue class

Internal processing logic

  • 1. Check whether the current plug-in is installed
if(VueRouter.install.installed){
    return;
}
VueRouter.install.installed = true
Copy the code
  • 2. Cache the Vue class inside the module
_Vue = Vue
Copy the code
  • 3. Inject the Router object passed in when creating the Vue instance.
_Vue.mixin({
    beforeCreate(){
        if(this.$options.router){
            _Vue.prototype.$router = this.$options.router

        }

    }
})
Copy the code

There are five processing logic in the constructor function

Receive an external option containing the page routing rule data Routes

2. Initialize responsive data that represents the current routing path.

3. Generate a routeMap mapping object corresponding to the routing path and the routing component based on routes

Register two global components router-link and router-view

5. Initialize the event

Used to listen for hashchange events or popState events based on different routing modes hash or history, respectively.Copy the code