如何在 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'],},