如何在 Vue 组件内访问 Vue 路由器中传递的道具？

Question

我在下面定义了一条路线：{  path: 'fit-details',  name: 'fit-details',  component: Fitment,  props: true},我正在使用来自州的数据通过我的路线传递道具：this.$router.push({ path: 'fit-details', query: {     year: this.query.year,     make: this.query.make,    model: this.query.model  }})我看到路由在通过时得到了正确定义：www.placeholder.com?year=2008&make=Acura&model=MDX最后在我的接收组件中，我有 props 实例化：export default {  props: ['year', 'make', 'model'],},但是由于某种原因我无法访问组件中的这些数据。任何帮助将不胜感激，老实说，我在 Vue 路由器方面不是最好的

Answer 1

无需在访问的组件中定义该道具，您可以使用this.$route.query.yearandthis.$route.query.make或者您可以执行以下操作：

const {'year', 'make', 'model'}=this.$route.query

或者 ：

{

  path: 'fit-details',

  name: 'fit-details',

  component: Fitment,

 props:(route) => ({ year: route.query.year,make:route.query.make,model:route.query.model })

},

在Fitment组件中：

export default {

  props: ['year', 'make', 'model'],

},