路由的傳參：
1.查詢字符串：
/user/regist?uname=jack&upwd=123
接收：
{{$route.query}}
2.rest風(fēng)格傳參
/user/login/rose/456
練習(xí)
<div id="app">
<router-link to="/home">首頁(yè)</router-link>
<router-link to="/user">用戶頁(yè)</router-link>
<router-view></router-view>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
<script>
var home={
template:`
<h1>我是首頁(yè)</h1>
`
}
var user={
template:`
<div>
<h1>我是用戶頁(yè)</h1>
<ul>
<li><router-link to="/user/denglu?y=jieke&m=123456">登錄</router-link></li>
<li><router-link to="/user/zhuce/jieke/123456">注冊(cè)</router-link></li>
</ul>
<router-view></router-view>
</div>
`
}
var denglu={
template:`
<div>
賬號(hào)<input type="text">
密碼<input type="text">
<button>登錄</button>
<span>{{$route.query}}</span>
<span>用戶名:{{$route.query.y}}</span>
<span>密碼:{{$route.query.m}}</span>
</div>
`
}
var zhuce={
template:`
<div>
賬號(hào)<input type="text">
密碼<input type="text">
確認(rèn)密碼<input type="text">
<button>注冊(cè)</button>
<span>{{$route.params}}</span>
<span>用戶名:{{$route.params.y}}</span>
<span>密碼:{{$route.params.m}}</span>
</div>
`
}
const luyou=[
{path:'/',component:home},
{path:'/home',component:home},
{path:'/user',
component:user,
children:[
{path:'denglu',component:denglu},
{path:'zhuce/:y/:m',component:zhuce}
]
}
]
const router=new VueRouter({
routes:luyou/*,
linkActiveClass:'active'*/
})
new Vue({
el:'#app',
router:router
})
</script>
