vue中嵌套路由的基本使用

<div id="app">
    <router-link to="/home">首頁</router-link>
    <router-link to="/user">用戶管理</router-link>

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

  <script src="./vue.js"></script>
  <script src="./vue-router.js"></script>
  <script>
    const Home = {
      template: `
        <h1>這是 Home 組件</h1>
      `
    }

    // 父組件：
    const User = {
      template: `
        <div class="user">
          <h2>用戶中心</h2>
          <router-link to="/user/profile">我的資料</router-link>
          <router-link to="/user/posts">崗位</router-link>

          <!-- 子路由展現在此處 -->
          <router-view></router-view>
        </div>
        `
    }

    // 子組件：
    const UserProfile = {
      template: '<h3>我的資料：張三</h3>'
    }
    const UserPosts = {
      template: '<h3>崗位：FE</h3>'
    }

    const router = new VueRouter({
      routes: [
        {
          path: '/home',
          component: Home
        },

        {
          path: '/user',
          component: User,
          // 子路由配置：
          children: [
            {
              // 當 /user/profile 匹配成功，
              // UserProfile 會被渲染在 User 的 <router-view> 中
              path: 'profile',
              component: UserProfile
            },
            {
              // 當 /user/posts 匹配成功
              // UserPosts 會被渲染在 User 的 <router-view> 中
              path: 'posts',
              component: UserPosts
            }
          ]
        }
      ]
    })

    const vm = new Vue({
      el: '#app',
      data: {

      },

      router
    })
  </script>