Vue Learning Notes Advanced article--vue-router installation and use

Introduction

Vue-router is Vue.js's official routing plugin, which is deeply integrated with vue.js and is ideal for building single-page applications. Vue's single-page applications are routing-and component-based, and routing is used to set access paths and map paths and components. Traditional page application, is to use some hyperlinks to achieve page switching and jump. In Vue-router single page application, it is the switch between the paths, that is, the switch of the components.
This article is based on the previous article (Vue Learning Notes Advanced article--VUE-CLI installation and introduction) VUE-CLI scaffolding tools. installation

At the terminal, go to the MY-DEMO1 project directory created in the previous article by using the CD command, and then install it using the following command:

   
   
    
    NPM Install Vue-router--save
   
   

The purpose of the--save parameter is to add the corresponding configuration in our package configuration file Package.json file. After the installation is successful, you can view the Package.json file, and you will find more "Vue-router": "^2.7.0" configuration. As follows:

   
   
    
      "Dependencies": {
    
        "vue": "^2.3.3",
    
        "Vue-router": "^2.7.0"
    
      },
   
   

Use

With the above steps, we have installed the Vue-router, but how do we use it in VUE-CLI?
First, we need to import and register the Vue-router in the Main.js file:

   
   
    
    ES6 syntax importing import
    
    vuerouter from ' vue-router '
    
    //Register
    
    vue.use (vuerouter)
   
   

Then it is instantiated:

   
   
    
    Const ROUTER = new Vuerouter ({
    
      mode: ' History ',
    
      routes:[
    
        {path: '/', component:demohome},
    
        {path: '/ About ', component:demoabout},
    
        {path: '/contact ', component:democontact}
    
      ]
    
    })
   
   

Path: is the path to the route.
Component: Is the component that the route needs to render.
Demohome, Demoabout, democontact are all single-file components in the code above, so we also need to create the above three components and import them into the current file. These three components we just use as examples, so it's simpler and the code is as follows: Demohome.vue:

 <template> <div id= "Home" >