Today I summarized the vue-route basis, the route officially recommended by vue.

I. Start

HTML

<div id="myDiv">
  <h1>Simple Routing</h1>
  <router-link to="/foo">Go to foo</router-link>    
  <router-link to="/bar">Go to bar</router-link>    

// Rendering Export
  <router-view></router-view>
</div> 

1. Create templates (components):
   (You can also import external components)

   var foo={template:"<p>I am foo assembly</p>"};
   var bar={template:"<p>I am bar assembly</p>"};

1. Component injection routing:

var routes = [
      {path:'/foo',component:foo},
      {path:'/bar',component:b ar},
   ];

1. Create routing instances:

// Other configurations can also be passed in here
const router = new VueRouter({
      routes     // (abbreviation) equivalent to routes: routes; 
    });

Note that routes don't have'r'(don't write routers)

1. Create a vue instance (and mount the instance)

   var routerVue = new Vue({
      router
   }).$mount("#myDiv"); 

Dynamic Routing Matching

Sometimes what we need is the same template structure, when the data is different, it is equivalent to connecting different ID login users to the same page, but to display the independent information of each user, then we use dynamic routing matching.
Dynamic routing is mainly used for global $route.params and dynamic parameters of routing. The params API of global route stores all parameters of routing. The parameters of path are marked with ":":

HTML

<div id="myDiv">
// Pass in the corresponding parameters foo and bar when clicking the corresponding link
  <router-link to="/User/:foo">Go to foo</router-link> 
  <router-link to="/User/:bar">Go to bar</router-link>  

   <router-view></router-view>
</div> 

JS

const User = {
      template:'<p>My ID yes{{ $route.params.id }}</p>',
// Routing can be observed during routing switching
      watch:{
        '$route'(to,form){
          console.log(to);  //To arrive
          console.log(form);
        }
      }
    }

    const router = new VueRouter({
      routes:[
         {path:'/user/:id',component:User}  // Label dynamic parameter id
      ]
    });

    var myVue = new Vue({
        router
    }).$mount("#myDiv")

3. Nested Routing

1. Nested routing means that we can use children to configure routing when rendering <router-view> in <router-view>.
For example:
HTML:

<div id="myDiv">
  <router-link to="/User/:foo">Go to foo</router-link> 
  <router-link to="/User/:bar">Go to bar</router-link>  

   <router-view></router-view>
</div> 

JS:

 const User = {
      template:'<div><p>My ID yes{{ $route.params.id }}</p><router-link to="/user/childone">ChildOne</router-link><router-link to="/user/childtwo">ChildOne</router-link><router-view></router-view></div>',
     }

     // Subrouting
     const userChildOne = {
        template:'<div>I am userChildOne</div>'
     }
     const userChildTwo = {
        template:'<div>I am userChildTwo</div>'
     }
    const router = new VueRouter({
      routes:[
         {path:'/user/:id',component:User,
           children:[  // Use the same as parameters and routes
              {path:"/user/childone",component:userChildOne},
              {path:"/user/childtwo",component:userChildTwo}
           ]

         }
      ]
    });

    var myVue = new Vue({
        router
    }).$mount("#myDiv")

IV. Named Routing

1. Name the route, specify the route jump, and use parameter name and v-bind

HTML:

<div id="myDiv">
<!-- To use v-bind Binding to -->
  <router-link :to="{name:'userOne',params:{userId:'123'}}">Go to foo</router-link> 
  <router-link :to="{name:'userTwo',params:{userId:'456'}}">Go to bar</router-link>  

   <router-view></router-view>
</div> 

JS:

  const User = {
      template:'<p>My ID yes{{ $route.params.userId }}</p>',
      watch:{
        '$route'(to,form){
          console.log(to);
          console.log(form);
        }
      }
    }

    const router = new VueRouter({
      routes:[
      // name corresponds to each other
         {path:'/user/:userId',name:"userOne",component:User},
         {path:'/user/:userId',name:"userTwo",component:User}
      ]
    });

    var myVue = new Vue({
        router
    }).$mount("#myDiv")

V. Named View

1. Name the rendering view router-view to specify the rendering component for that view
HTML:

<div id="myDiv">
<!-- To use v-bind Binding to -->
  <router-link :to="{name:'userOne',params:{userId:'123'}}">Go to foo</router-link> 
  <router-link :to="{name:'userTwo',params:{userId:'456'}}">Go to bar</router-link>  
<!-- View Naming If Not Written name By default default-->
   <router-view></router-view>
   <router-view name='b'></router-view>
</div> 

JS:

// Four templates
    const UserA = {
      template:'<p>I am one,ID yes{{ $route.params.userId }}</p>',
    }
    const UserB = {
      template:'<p>I am two,ID yes{{ $route.params.userId }}</p>',
    }
    const UserC = {
      template:'<p>I am three,ID yes{{ <1ro></1ro>ute.params.userId }}</p>',
    }
    const UserD = {
      template:'<p>I am four,ID yes{{ $route.params.userId }}</p>',
    }
    const router = new VueRouter({
      routes:[
      // name corresponds to each other
         { 
            path:'/user/:userId',
            name:"userOne",
            components:{ // Note that there are multiple "s" for components
               default:UserA,
               b:UserB
            }
         },
         { 
            path:'/user/:userId',
            name:"userTwo",
            components:{
               default:UserD,
               b:UserC
            }
        }
      ]
    });

    var myVue = new Vue({
        router
    }).$mount("#myDiv")

Redirection and aliases

Redirection and aliases, let me first explain what they are called redirection and aliases.

Redirection is mainly used for parameters: redirect and alias is mainly used for parameters: alias
HTML:

<div id="myDiv">
 <h2>View the change at the end of the address bar</h2>
  <router-link to="/User/foo">Go to foo</router-link> 
  <router-link to="/User/bar">Go to bar</router-link>  
  <router-link to="/User/Car">Go to bar</router-link>  

   <router-view></router-view>
</div> 

JS:

    const User = {
      template:'<p>I'm on the same page.</p>',
    }
    const router = new VueRouter({
      mode:"history",
      routes:[
         { path:'/User/foo',component:User},
         { path:'/User/bar',redirect: '/User/foo',component:User},
         // The goal of redirection can also be a named route:
         // Even a method that dynamically returns the redirected target:

         // Alias Settings
         { path:'/User/foo',alias: '/User/Car'}

      ]
    });

    var myVue = new Vue({ 
        router
    }).$mount("#myDiv")