<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- 如果某个route上写了props: true属性，那么对应的路由组件上就会多出来一个属性 { path: ‘/demo/:a‘, component: demo, props: true } 相当于 <demo v-bind="$route.params"></demo> 又相当于 <demo :id="$route.params.id"></demo> 如果给路由对象上添加props等于true则对应的路由组件里就可以接收props props: { params参数: 数据类型 } 如果路由对象上的props是对象，则会按照原样添加给路由组件 { path: ‘/‘, component: demo, props: {a: 1, b: 2, c: 3} } 相当于 <demo v-bind="{a: 1, b: 2, c: 3}"></demo> 又相当于 <demo :a="1" :b="2" :c="3"></demo> 所以可以在demo组件中设置prop接收a b c三个值 1 如果props是true 则将route.params添加到组件上 <com v-bind="route.params"></com> 2 如果props是对象 则将这个对象原样添加到组件上 <com v-bind="props"></com> 3 如过props是函数 （一般返回值为对象） 则将这个函数的返回值添加到组件上 <com v-bind="props返回值"></com> <com v-bind="{key:value}"></com> <com :key="value"></com> 最终就可以在组件中设置props用于接收这些属性值 这个不是新的功能，而是为了解耦提出的新的写法 --> <div id="app"> <router-view></router-view> </div> <script src="../vue.js"></script> <script src="../vue-router.js"></script> <script> const com = { template: ` <div>组件</div> `, props: { id: String, // a: Number, // b: Number, // c: Number, // query: Object a: String, b: String, c: String, }, created () { this.getData() }, methods: { getData () { // console.log(this.$route.params.id) console.log(this.id) console.log(this.a, this.b, this.c) console.log(this.query) } } } const router = new VueRouter({ routes: [ { path: ‘/:id‘, component: com, // props: true /* props: { a: 1, b: 2, c: 3 } */ props: (route) => { return route.query } } ] }) const app = new Vue({ el: ‘#app‘, router }) </script> </body> </html>
原文：https://www.cnblogs.com/bao2333/p/10278917.html