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