# 2、路由组件传递参数 # 4.2路由组件传递参数 $route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦 ## 1\. props的值为布尔类型 ~~~ const router = new VueRouter ( { routes :[ //如果props 被设置为true, route. params 将会被设置为组件属性 { path: ' /user/: id'，component: User, props: true } ] }) const User = { props: ['id'], // 使用props 接收路由参数 template : '<div>用户id: {{ id }}</div>' // 使用路由参数 } ~~~  ## 2\. props的值为对象类型 ~~~ const router = new VueRouter ({ routes :[ //如果props是一个对象，它会被按原样设置为组件属性 { path: ' /user/: id'，component: User, props: { uname: 'lisi'，age: 12 } } ] }) const User = { props: [ 'uname', ' age'], template: *<div>用户信息: { { uname + '---' + age} }</div> ' } ~~~  ## 3\. props的值为函数类型 ~~~ const router = new VueRouter ({ routes: [ //如果props 是一个函数，则这个函数接收route 对象为自己的形参 { path: ' /user/:id'， component :User, props: route => ({ uname: 'zs', age: 20，id: route .params. id }) } ] }) const User = { props: ['uname', 'age', 'id'], template: '<div>用户信息: { { uname + '---' + age + '---' + id} }</div> ' } ~~~