1.路由的传参

  查询字符串
     /user/regist?name=jack&age=18  
     接收：{{$route.query}}                 
                                       
  rest风格
     /user/login/jack/18
     接收： {{$route.params}}

<div id='app'>
<router-link to='/home'>首页</router-link>
<router-link to='/user'>用户页</router-link>

  <router-view></router-view>

</div>
<script src='js/vue.js'></script>
<script src='js/vue-router.js'></script>
<script>
//2.
var Home={
template:<h1>这是首页</h1>
}

   var  User={
       template:`
         <div>
             <h1>这是用户页</h1>
             <ul>
                 <li>
                    <router-link to='/user/regist?uname=jack&&age=18'>注册</router-link>
                 </li>
                  <li>
                    <router-link to='/user/login/alice/20'>登录</router-link>
                 </li>
             </ul>
             <router-view></router-view>
         </div>
       `
   }
   
   var Regist={
       template:`
         <div>
            <h3>这是注册页面</h3>
             <a href=''>{{$route.query}}</a>
             <ul>
                <li>{{$route.query.uname}}</li>
                <li>{{$route.query.age}}</li>
             </ul>
        </div>
         `
   }
   
    var Login={
       template:`
          <div>
            <h3>这是登录页面</h3>
            <p>{{$route.params}}</p>
            <ul>
                <li>{{$route.params.userName}}</li>
                <li>{{$route.params.userage}}</li>
             </ul>
          </div>
        `
   }
   
   //3.
   const routes=[
       {path:'/',component:Home},
       {path:'/home',component:Home},
       {
           path:'/user',
           component:User,
           children:[
               {path:'regist',component:Regist},
               {path:'login/:userName/:userage',component:Login}  
           ]
       }
   ]
   
   //4.
   const router=new VueRouter({
       routes:routes
   })
   
   //5.
   new Vue({
       el:'#app',
       router:router
   })
</script>

2.路由的嵌套

<div id='app'>
<router-link to='/home'>首页</router-link>
<router-link to='/user'>用户页</router-link>

  <router-view></router-view>

</div>
<script src='js/vue.js'></script>
<script src='js/vue-router.js'></script>
<script>
//2.
var Home={
template:<h1>这是首页</h1>
}

   var  User={
       template:`
         <div>
             <h1>这是用户页</h1>
             <ul>
                 <li>
                    <router-link to='/user/regist'>注册</router-link>
                 </li>
                  <li>
                    <router-link to='/user/login'>登录</router-link>
                 </li>
             </ul>
             <router-view></router-view>
         </div>
       `
   }
   
   var Regist={
       template:`<h3>这是注册页面</h3>`
   }
   
    var Login={
       template:`<h3>这是登录页面</h3>`
   }
   
   //3.
   const routes=[
       {path:'/',component:Home},
       {path:'/home',component:Home},
       {
           path:'/user',
           component:User,
           children:[
               {path:'regist',component:Regist},
               {path:'login',component:Login}
           ]
       }
   ]
   
   //4.
   const router=new VueRouter({
       routes:routes
   })
   
   //5.
   new Vue({
       el:'#app',
       router:router
   })
</script>

2.路由的嵌套

<div id="app">
<router-link to='/home'>首页</router-link>
<router-link to='/user'>用户页</router-link>

    <router-view></router-view>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
    //2.创建组件
    var Home={
        template:`<h1>这是首页</h1>`
    }
    
    var User={
        template:`
             <div>
                <h1>这是用户页</h1>
                    <ul>
                       <li>
                          <router-link to='/user/regist'>注册</router-link>
                       </li>
                       <li>
                          <router-link to='/user/login'>登录</router-link> 
                       </li>    
                    </ul>
                     <router-view></router-view>
            </div>
       `
    }
    
    var Regist={
        template:`<h3>这是注册页面</h3>`
    }
    
    var Login={
        template:`<h3>这是登录页面</h3>`
    }
    
    //3.配置路由
    const routes=[
        {path:'/',component:Home},
        {path:'/home',component:Home},
        {
            path:'/user',
            component:User,
            children:[
                {path:'regist',component:Regist},
                {path:'login',component:Login}
            ]
        }
    ]
    
    //4.创建一个路由实例
    const router=new VueRouter({
        routes:routes,
        //改变class名 再在style中改变其样式
        linkActiveClass:'active'
    })
    
    //5.把路由实例挂在到vue实例上
    new Vue({
        el:'#app',
        router:router
    })
</script>