SOURCE

const User ={
    props:['name','age','id'],
    template:`
      <div>
      <h1>User的组件--用户id为{{id}}}--姓名为{{name}}}---年龄为{{age}}}</h1>
      <button @click='goRegister'>跳转到注册页面</button>
      </div>
    `,
    methods:{
        goRegister(){
            this.$router.push('/register')
             
        }
    }
}

const Register ={
    template:`
     <div>
      <h1>Register的组件</h1>
      <button @click='goback'></button>
     </hr>

     //子路由链接
    <router-link to='/register/tab1'>tab1<router-link>
    <router-link to='/register/tab2'>tab2<router-link>
       <!-- 子路由的占位符 -->
    <router-view />
    </div>
    `,
    methods:{
        goback(){
            this.$router.go(-1)
        }
    }
}
    //tab1 tab2组件
    const Tab1={
        template:`
             <h3>tab1的组件</h3>
        
        `
    }

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

  // 创建路由实例对象

  const router = new VueRouter({
      // 所有的路由规则,路径+组件
      routers:[
        //路由重定向，即默认显示哪个
        {path:'/', redirect:'/user'},
          // 命名路由
          {name:'user',
           path:'/user/:id',component:User,props:router=>({name:'feizhu',age:
           '3',id:route.params.id})},
               
        {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-link to='{name:'user',params:{id:3}}'>User3<router-link>
<!-- 路由占位符 -->
 <router-view></router-view>

</div>