vue-router single page routing

In vue, there is a class library called vue-router, which is used to do single-page routing. Routing is generally divided into four steps:

Prepare a root component();
You need to prepare the routing content template;
Prepare to route new VueRouter();
Associated routing map
Start the route start(App,'#box'); //The first parameter is the prepared root component, and the second parameter is the location to be bundled is the id defined by yourself.

Download address of vue-router on github:/vuejs/vue-router

The simple code about routing jump is as follows:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;script type="text/javascript" src="js/" &gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/" &gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/" &gt;&lt;/script&gt;
    &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div &gt;
      &lt;ul&gt;
        &lt;li&gt;
          &lt;a v-link="{path:'/home'}"&gt;I'm the firsta&lt;/a&gt;
        &lt;/li&gt;
        &lt;li &gt;
          &lt;a v-link="{path:'news'}"&gt;I'm the seconda&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div&gt;
        &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;script&gt;
    //1. Prepare a root component    var App=();
    
    // News component preparation    var Home=({
      template:'<h3>I am the first content page of a</h3>'
    });
    
    var News=({
      template:'<h3>I am the second content page of a</h3>'
    })
    
    //3. Prepare the route    var router = new VueRouter();
    
    //4. Related    
    ({
      'home':{
        component:Home
      },
      'news':{
        component:News
      }
    })
    
    //5. Start the routing    
    (App,'#box');
  &lt;/script&gt;
&lt;/html&gt;

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.