Comprehensively parse the basic usage of vue router (dynamic routing, nested routing)

const routes = [
 { path: '/home', component: Home },
 { path: '/about', component: About }
]

const router = new VueRouter({
  routes // routes: abbreviation of routes})

const app = new Vue({
 router
}).$mount('#app')

<template>
 <div>
  <h1>home</h1>
  <p>{{msg}}</p>
 </div>
</template>
<script>
 export default {
  data () {
   return {
    msg: "I am a home component"
   }
  }
 }
</script>
<template>
 <div>
  <h1>about</h1>
  <p>{{aboutMsg}}</p>
 </div>
</template>
<script>
 export default {
  data () {
   return {
    aboutMsg: 'I'm about component'
   }
  }
 }
</script>

<template>
 <div >
 <img src="./assets/">
 <header>
 <!-- router-link Define the path to which click to navigate to -->
  <router-link to="/home">Home</router-link>
  <router-link to="/about">About</router-link>
 </header>
 <!-- The corresponding component content is rendered torouter-viewmiddle -->
 <router-view></router-view> 
 </div>
</template>
<script>
export default {
 
}
</script>

import Vue from "vue";
import VueRouter from "vue-router";
// Introduce componentsimport home from "./";
import about from "./";
// Tell vue to use vueRouter(VueRouter);
const routes = [
 {
  path:"/home",
  component: home
 },
 {
  path: "/about",
  component: about
 }
]
var router = new VueRouter({
 routes
})
export default router;

import Vue from 'vue'
import App from './'
// Introduce routingimport router from "./" // The router of import router must be lowercase, do not write it as a Router, otherwise it will report an error with can't matchnew Vue({
 el: '#app',
 router, // Inject into the root instance render: h => h(App)
})

const routes = [
 {
  path:"/home",
  component: home
 },
 {
  path: "/about",
  component: about
 },
 // Redirect {
  path: '/', 
  redirect: '/home' 
 }
]

<template>
 <div >
 <img src="./assets/">
 <header>
  <router-link to="/home">Home</router-link>
  <router-link to="/about">About</router-link>
  <!-- Add two touserComponent navigation，You can see that different use is used heretoproperty -->
  <router-link to="/user/123">User123</router-link>
  <router-link to="/user/456">User456</router-link>
 </header>
 <router-view></router-view> 
 </div>
</template>

const routes = [
 {
  path:"/home",
  component: home
 },
 {
  path: "/about",
  component: about
 },
 /*Added user path, configured with dynamic id*/
 {
  path: "/user/:id",
  component: user
 },
 {
  path: '/', 
  redirect: '/home' 
 }
]

<template>
 <div>
  <h1>User</h1>
  <div>I amuserComponents</div>
 </div>
</template>
<script>
 export default {
 }
</script>

<template>
 <div>
  <h1>User</h1>
  <div>I amuserComponents, The dynamic part is{{dynamicSegment}}</div>
 </div>
</template>
<script>
 export default {
  computed: {
   dynamicSegment () {
    return this.$
   }
  }
 }
</script>

<script>
 export default {
  data () {
   return {
    dynamicSegment: ''
   }
  },
  watch: {
   $route (to,from){
    // to represents the component you are going to, from represents which component you came from, they are two objects, you can print it out, and they also have a param property    (to);
    (from);
     = 
   }
  }
 }
</script>

<template>
 <div>
  <h1>home</h1>
<!-- router-link oftoAttributes should be paid attention to，The route is to enter firsthome,然后才进入相应of子路由如 phone,So when writing home Bring it with you -->
  <p>
   <router-link to="/home/phone">cell phone</router-link>
   <router-link to="/home/tablet">flat</router-link>
   <router-link to="/home/computer">computer</router-link>
  </p>
  <router-view></router-view>
 </div>
</template>

const routes = [
 {  path:"/home",
　//The following attributes are also quite a few, because we first enter the home page to enter the sub-router.  component: home,
 // Subroutine  children: [
   {
    path: "phone",
    component: phone
   },
   {
    path: "tablet",
    component: tablet
   },
   {
    path: "computer",
    component: computer
   }
  ]
 },
 {
  path: "/about",
  component: about
 },
 {
  path: "/user/:id",
  component: user
 },
 {
  path: '/', 
  redirect: '/home' 
 }
]

children: [
 {
  path: "phone",
  component: phone
 },
 {
  path: "tablet",
  component: tablet
 },
 {
  path: "computer",
  component: computer
 },
 // When entering home, the following components are displayed {
  path: "",
  component: phone
 }
]

{
  path: "/user/:id",
  name: "user",
  component: user
}

 <router-link to="/user/123">User123</router-link> // is equivalent to the following <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> // When using objects as routes，toAdd a colon before it,Indicates binding