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

最后，在接收组件中，我实例化了道具：

export default {
  props: ['year', 'make', 'model'],
},

但是由于某种原因，我无法在组件中访问此数据。任何帮助将不胜感激，说实话，就Vue路由器而言，这不是最好的方法

Answer 1

无需在访问的组件内定义道具，可以使用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'],
},

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

1 个答案: