路由的传参数
2018-10-07 本文已影响0人
Cherish丶任
路由的传参
1：查询字符串
/user/zhuce?uname=jack&&old=18
接收：{{route.query为固定值，可在后面加具体的对象
2:rest风格传参
/user/denglu/uname/jack
接收：{{$route.params }}
接收$route.params为固定值，可在后面加具体的对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/index">首页</router-link>
<router-link to="/urse">用户页</router-link>
<router-view></router-view>
</div>
<script>
var Index={
template:`
<h1>这是首页</h1>
`
}
var Urse={
template:`
<div>
<h1>这是用户页</h1>
<ul>
<li><router-link to="/urse/eee/uname=jack&age=18">注册</router-link></li>
<li><router-link to="/urse/ssss/jack/18">登录</router-link></li>
</ul>
<router-view></router-view>
</div>
`
}
var Eee={
template:`
<div>
<h2>111</h2>
<a href="#">{{$route.query}}</a>
<ul>
<li>
{{$route.query.uname}}
</li>
<li>
{{$route.query.age}}
</li>
</ul>
</div>
`
}
var Ssss={
template:`
<div>
<h2>2222</h2>
<p>{{$route.params}}</p>
<ul>
<li>{{$route.params.ursename}}</li>
<li>{{$route.params.urseage}}</li>
</ul>
</div>
`
}
const a=[
{path:'/',component:Index},
{path:'/index',component:Index},
{
path:'/urse',
component:Urse,
children:[
{path:'eee',component:Eee},
{path:'ssss/:ursename/:urseage',component:Ssss}
]
}
]
const b=new VueRouter({
routes:a
})
new Vue({
el:'#app',
router:b
})
</script>
</body>
</html>
