Vue-router is the official route manager of vue. js. Developers can choose whether to use vue-Router as the route manager, because it is installed in Vue as a plug-in.

How do I install a Vue plug-in

If the plug-in is an object, the install method must be provided. If the plug-in were a function, it would be called as the install method, which passes in Vue as an argument when called. This method needs to be called before calling new Vue()

When the install method is called multiple times by the same plug-in, the plug-in will only be installed once

That’s the official documentation, but let’s look at the code

// This method is executed when initGlobalAPI initializes the global API
export function initUse (Vue: GlobalAPI) {
  // Add the use method to the Vue object. The method can be a method or an object
  Vue.use = function (plugin: Function | Object) {
    // Get the list of installed plug-ins for the current instance
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    // Check whether the plug-in is already installed
    // If the same plugin is called more than once, the plugin will only be installed once
    if (installedPlugins.indexOf(plugin) > - 1) {
      return this
    }

    // Additional parameters
    const args = toArray(arguments.1)
    // Insert the current instance at the top of the parameter array
    args.unshift(this)
    if (typeof plugin.install === 'function') { // Check whether plugin provides the install method
      // Call plugin.install with additional arguments
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {  Otherwise, if plugin is a function, it will be used as the install method
      // Plugin is called as install, passing in additional parameters
      plugin.apply(null, args)
    }
    // Add the current plug-in to the list of installed plug-ins
    installedPlugins.push(plugin)
    return this}}Copy the code

What is described in the official documentation is much clearer in the code

Vue – install the Router

If vue-Router is used in a modular project, routing functionality must be explicitly installed through vue.use ()

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
Copy the code

When VueRouter is defined, VueRouter. Install is already defined for vue.use (VueRouter) to execute its install method

Now that you’ve defined the VueRouter. Install method, let’s take a look at what VueRouter does during the install process

// The first argument to this method is the Vue constructor and the second argument is an optional object
export function install (Vue) {
  // Verify that install is called only once
  if (install.installed && _Vue === Vue) return
  // Define that the plug-in is already installed
  install.installed = true

  // Assign Vue to the global variable
  _Vue = Vue

  // Check whether v is not undefined
  const isDef = v= >v ! = =undefined

  const registerInstance = (vm, callVal) = > {
    let i = vm.$options._parentVnode
    if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
      i(vm, callVal)
    }
  }

  // Vue.mixin injects components
  Vue.mixin({
    beforeCreate () {
      // Determine whether the component has a Router object, which is only available on the root component
      if (isDef(this.$options.router)) {
        // Set the root route to itself
        this._routerRoot = this
        this._router = this.$options.router
        // Call the init() method of the VueRouter instance to initialize the route
        this._router.init(this)
        // Implement bidirectional binding for the _route attribute
        Vue.util.defineReactive(this.'_route'.this._router.history.current)
      } else {
        // Used for router-view hierarchy judgment
        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
      }
      registerInstance(this.this)
    },
    destroyed () {
      registerInstance(this)}})// Define the return value of Vue.$router
  Object.defineProperty(Vue.prototype, '$router', {
    get () { return this._routerRoot._router }
  })

  // Define the return value of Vue.$route
  Object.defineProperty(Vue.prototype, '$route', {
    get () { return this._routerRoot._route }
  })

  // Globally register components router-view and router-link
  Vue.component('RouterView', View)
  Vue.component('RouterLink', Link)

  // Get the custom selection merge policy
  const strats = Vue.config.optionMergeStrategies
  BeforeRouteEnter, beforeRouteLeave, beforeRouteUpdate and Created use the same merge strategy
  strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created
}

Copy the code

This is how vue.use (VueRouter) works. This is why vue-Router can be implemented by Vue. How do you start developing your own Vue plug-in