vue-router

preface

Ha ha ha, finally entered the vUE learning link, we first use

vue create hello-world
Copy the code

Create a template for us to use later

The target

To do a very simple manual route first we need to create a constructor

export default class Router {}
Copy the code

Very simple right, although this is a small step for us, but is a big step for us!!

Now we have to think about what do we do

3

2

1

Reveal the answer: Create an install method

Why is this method needed?

First send the official document of vue.js: Develop plug-in

The vue. use method calls the install method of the corresponding component, so we need to make some declarations about the corresponding method

Ps: Do you feel useful knowledge suddenly increased one?? And that’s not a concern? Thumb up? Three in a row?

Create the install method

We’re going to define a static method that takes a Vue constructor as its first argument and an optional option object as its second argument. We don’t need the second argument for now, so we’ll leave it at that

export default class Router {
  The vue. use method calls the install method of the corresponding component
  static install(Vue){}}Copy the code

After a simple definition, we need to consider some problems, as the saying goes: sharpening the knife does not mistakenly cut wood workers

Tidy it upinstallObjective of method

  • Determine whether the plug-in is installed

    Purpose: Avoid repeated installation

  • Insert the parameter vue from the install method globally

    Purpose: We get the vUE instance callback from the Router static method, but we also need to call the vue instance from other instance methods, such as router-link and router-view, so we need to save the VUE to the global object

  • Inject the Router object passed in when creating the VUE instance into the Vue instance

    Purpose: : easy for us to call in the page

Determine whether the plug-in is installed and implemented

This is easier because the install static method is called, so we can identify router.install.installed.

Here installed is our custom attribute. We can customize its value to determine whether it has been installed.

The code is as follows:

export default class Router {
  The vue. use method calls the install method of the corresponding component
  static install(Vue) {
    // 1. Check whether the plug-in is installed
    if(Router.install.installed){
      return
    }
    Router.install.installed = true}}Copy the code

willinstallParameters in a methodvueInsert into the global

let _vue = null

export default class Router {
  The vue. use method calls the install method of the corresponding component
  static install(Vue){...// 2. Insert the parameter 'vue' in the 'install' method globally
    _vue = Vue
  }
}
Copy the code

Will createvueInstance is passed inRouterObject injected intovueinstance

The trouble with this step is that first we need to know how we inject into the vue instance, and we need to distinguish whether it is a component or not

Code first:

 _vue.mixin({
      beforeCreate() {
        if(this.$options.router){
          _vue.prototype.$router = this.$options.router
        }
      }
    })
Copy the code

Yes, you read that right! In the beforeCreat life cycle, the Router obtains and initialates the Router object from the options of the current Vue instance.

  1. Where does $options come from?

    When we call our static install method, our this refers to a vue instance, so we have $options

  2. Why call router in $options? Why is that? What does it actually do in options? Does Vuejs provide any special logic for their own plugins? (Shocked 🤯)

    After reviewing the official document, I found some details in the use of vue-router. As shown in the figure below, we can see that the operation is carried out in this way when we pass options, which means that the router startup is handed over to the Vue instance. So here we have the code above

At this point our simple version of the RouterInstall function is constructed