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

在组件中使用$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:''}

}

}