1.在路由配置頁面中引入元件。

2、在要對應的配置頁面中新增對映關係：

const routes = [
  {
    path:'',
    //redirect重定向,預設開啟的路徑
    redirect:'/home'
  },
  {
  path:'/home',
  component:Home,
  children:[{
    path:'',
    redirect:'message'
  },
  {
    path:'message',
    component:HomeMessage
  },
  {
    path:'news',
    component:HomeNews
  }
    
  ]
  },
  {
    path:'/about',
    component:About
  },
  {
    path:'/user/:userid',
    component:User
  }
  ];

3、在父元件中使用巢狀路由：

<template>
  <div>
    <h1>我是Home頁面</h1>
    <p>我是Home頁面</p>
    <router-link to="/home/message"  >訊息</router-link>
    <router-link to="/home/news" >新聞</router-link>
    <router-view></router-view>
  </div>

</template>
<script>
  export default {
    name:'Home'
  }


</script>

<style scoped>

</style>