vue-router2.0 组件之间传参及获取动态参数的方法

Vue Router 2.0 组件之间传参及获取动态参数的方法 在 Vue.js 框架中，组件之间传递参数是一种常见的需求，尤其是在使用 Vue Router 进行路由管理时。下面我们将介绍 Vue Router 2.0 组件之间传参及获取动态参数的方法。 一、使用 Router-Link 传递参数 在 Vue Router 2.0 中，我们可以使用 Router-Link 组件来传递参数。例如，我们可以在模板中使用以下代码： ```html <li v-for="el in hotLins"> <router-link :to="{path:'details',query: {id:el.tog_line_id}}"> <img :src="el.image_list[0]"> <h3>{{el.tourism_name}} {{el.tog_line_id}}</h3> <p>{{el.address}}</p> </router-link> </li> ``` 在上面的代码中，我们使用 Router-Link 组件来传递参数 id，我们可以在 query 对象中定义该参数。 二、在组件中获取动态参数 在组件中，我们可以使用 `$route.query` 对象来获取动态参数。例如： ```javascript created: function() { var id = this.$route.query.id; this.getData(id); }, ``` 在上面的代码中，我们使用 `$route.query.id` 来获取参数 id，然后将其传递给 `getData` 方法。 三、使用 Props 传递参数 如果我们想要在父组件中传递参数给子组件，我们可以使用 Props 传递参数。例如： ```javascript // 父组件 var vm = Vue.extend({ router: router, data: function() { return { id: '11484' // 城会玩明细id } } }); // 子组件 props: { id: { type: String, required: true } }, ``` 在上面的代码中，我们在父组件中定义了 id 属性，然后在子组件中使用 Props 传递该参数。 四、在 Router-View 中传递参数 在 Router-View 中，我们可以使用以下代码来传递参数： ```html <router-view :id="id" :order-info="orderInfo"></router-view> ``` 在上面的代码中，我们使用 `:id` 和 `:order-info` 来传递参数 id 和 orderInfo。 Vue Router 2.0 组件之间传参及获取动态参数的方法有多种，我们可以根据实际情况选择合适的方法来实现参数传递。