路由組件的傳參
阿新 • • 發佈：2019-01-16
methods vue creat create mpat pla ont new col
<!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>
路由組件的傳參