javascript - 如何在 Vue 组件内访问 Vue 路由器中传递的 props？

Question

我有一个定义如下的路线:

{
  path: 'fit-details',
  name: 'fit-details',
  component: Fitment,
  props: true

},

我正在通过我的路线传递 Prop 以及来自州的数据:

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

无需在访问的组件中定义该 Prop ，您可以使用 this.$route.query.year 和 this.$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'],
},