Vue中通过URL传递参数
在Vue中,除了使用push 和<router-link :to=''></router-link>进行页面跳转和参数传递之外,还可以使用URL链接进行参数传递,这些参数携带在链接地址后面,比如:/Users/xiaofeiniao/Desktop/Vue/URLParam.html#/home/10001/oo/www.baidu.com,中间10001 ,oo,ww..
·
在Vue中,除了使用push 和<router-link :to=''></router-link>进行页面跳转和参数传递之外,还可以使用URL链接进行参数传递,这些参数携带在链接地址后面,比如:/Users/xiaofeiniao/Desktop/Vue/URLParam.html#/home/10001/oo/www.baidu.com,
中间10001 ,oo,www.baidu.com都是在地址中传递的参数,而home是其中的一个子路由,
HTML的测试代码如下:
<html>
<head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<style>
button{
width: 100px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id='app'>
<router-view/>
</div>
<script>
var helloworld ={
template:'<div><h1>{{headTitle}}</h1><button @click="gotoPage">跳转到子页面</button><router-view/></div>',
data:function(){
return{
headTitle:'999',
params:{
id:10001,
name:'oo',
imageUrl:'www.baidu.com'
}
}
},
methods:{
gotoPage:function(){
console.log(this);
console.log('页面跳转'+JSON.stringify(this.params));
this.$router.push({
path:'/home/'+this.params.id+'/'+this.params.name+'/'+this.params.imageUrl
});
}
}
}
var childTemplate ={
template:'<p>{{$route.params.id}}{{$route.params.name}}{{$route.params.imageUrl}}</p>',
props:['params'],
beforeRouteEnter:function(from,to,next){
console.log('页面进入');
console.log(from);
console.log(to);
next();
}
}
var router = new VueRouter({
routes:[
{
path:'/',
component:helloworld,
children:[
{
path:'/home/:id/:name/:imageUrl',
component:childTemplate,
name:'childTemplate'
}
]
}
]
})
new Vue({
el:'#app',
data:function() {
return {
headTitle:"头部标题"
}
},
router:router
})
</script>
</body>
</html>
在传递过来的模板页面,可以通过$route.params来获取,比如在上面代码中获取
<p>{{$route.params.id}}{{$route.params.name}}{{$route.params.imageUrl}}</p>
更多推荐
所有评论(0)