1. 路由的基本配置

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/*
 
 webpackChunkName: "about" */ '../views/About.vue')
  }.
  {
    path: '/',
    redirect: '/index'
  }
]

2. 路由的跳轉 命令式導航router-link 與 程式設計式導航$router.push 導航

1. 命令式導航
<router-link to="{name:Home}" />
2. 程式設計式導航
<button @click="toHome" />
methods(){
   toHome(){
   this.$router.push({name:Home})
 } 
} 
 

3. 動態路由

  {
    path: '/home/:id',
    name: 'Home',
    component: () => import('../views/home')
  },

然後通過 this.$route.params.id 獲取 id 值

4. 巢狀路由

  {
    path: '/home/:id',
    name: 'Home',
    component: () => import('../views/home'),
    children: [
      {
        path: 
 
'/child',
        name: 'Child',
        component: () => import('../views/child')
      }
    ]
  },