首页 > 其他 > 详细

vue-router 路由组件传值 解耦 props

时间:2021-04-01 23:17:26      阅读:14      评论:0      收藏:0      [点我收藏+]

在组件中使用$route会使之与其对应路由形成高度耦合,使用props将组件和路由解耦:

routes:[

{

path:‘/user‘,

component:User,

children:[

{path:info/:id,props:true,component:Info},//boolean值     

{path:info1,props:{name:‘zhangsan‘},component:Info},//静态对象    通过$attrs获取props中的数据
{path:info2/:id,props:()=>{name:‘zhangsan3333‘},component:Info}//函数   通过$attrs获取props中的数据   动态路由参数依然使用route.params.id
]

}

]
</script>
Info.vue
<template>

<div>{{id}}</div>//可以直接获取动态路由参数

</template>

<script>

export default{

props:{

id:{type:String,default:‘‘}

}

}

vue-router 路由组件传值 解耦 props

原文:https://www.cnblogs.com/xiaofenguo/p/14607851.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!