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:''}

}

}