SOURCE

const User ={
    template:`
      <h1>User的组件</h1>
    `
}

const Register ={
    template:`
      <h1>Register的组件</h1>
     </hr>

     //子路由链接
    <router-link to='/register/tab1'>tab1<router-link>
    <router-link to='/register/tab2'>tab2<router-link>
       <!-- 子路由的占位符 -->
    <router-view />
    `
}
    //tab1 tab2组件
    const Tab1={
        template:`
             <h3>tab1的组件</h3>
        
        `
    }

     const Tab2={
        template:`
             <h3>tab2的组件</h3>
        
        `
    }

  // 创建路由实例对象

  const router = new VueRouter({
      // 所有的路由规则,路径+组件
      routers:[
        //路由重定向，即默认显示哪个
        {path:'/', redirect:'/user'},
        {path:'/user' ,component:User
      },{ path:'/register' ,component:Register, children:[{
           path:'/register/tab1' ,component:Tab1
      },{path:'/register/tab2' ,component:Tab2}]



      }]
  })

   const vm = new vue({
       el:'#app',
       data:{},
       // 挂载路由实例对象
        // router: router
        router
   })

<!-- 被 vm 实例所控制的区域 -->
<div id='app'>
<router-link to='/user'>User<router-link>
<router-link to='/register'>Register<router-link>

<!-- 路由占位符 -->
 <router-view></router-view>

</div>