雾观远山

博客园 首页 新随笔 联系 订阅 管理

对象传参(值为函数的形式)

①index.js
const routes =[
{
path:'/user',
name:'user', //路由名称
component: User,
props: function (route) { // route是当前路由信息对象
return{
id:route.params.id,
name:route.params.name,
age:route.params.age
}

}
}
]


②app.vue(绑定哪个对象)
<div>
<router-link v-bind:to="{name:'user',params:{id:5,name:'zsjuan',age:15}}">&nbsp; user-4</router-link>
<div>

 

③user.vue 接收

<template>
<!-- <h1>id {{$route.params.id}}</h1>-->
<!-- <h1>姓名{{$route.params.name}}</h1>-->
<!-- <h1>年龄{{$route.params.age}}</h1>-->

<p>{{id}}</p>
<p>{{name}}</p>
<p>{{age}}</p>
</template>

<script>
export default {
name: "User",
props:['id','name','age']
}
</script>

<style scoped>

</style>

posted on 2022-05-12 00:14  雾观远山  阅读(56)  评论(0编辑  收藏  举报