Question

我正在使用vue.js，我有一个组件，用户选择他们想要的东西，然后他们点击“订单”。此时我使用<router-link to="/order">来显示新页面。但我不知道如何从那里的前一个组件访问该数组。我尝试过这样的:selected-chairs="selectedChairs"和其他组件props: ['selectedChairs']，但它不起作用。我的路线文件（index.js）：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Select',
      component: Select,
      props: true
    },
    {
      path: '/order',
      name: 'Order',
      component: Order,
      props: true
    }
  ]
})

Answer 1

可以做你想做的事，但我不认为这是个好主意。首先，根据您的原始问题，这是您可以做的：

设置您的订单路线：

export default new Router({
    routes: [{
      path: '/order/:selected-chairs',
      name: 'Order',
      component: Order,
      props: true
    }]
}

然后你可以有这样的链接：

<router-link :to="'/order/' + JSON.stringify(mySelectedChairs) + '">Link Text</router-link>

或者你可以做到

<router-link :to="{path: 'order', query: { selected-chairs: mySelectedChairs }}">Link Text</router-link>

这将允许您使用以下命令访问组件上的数据：

this.$route.params.selected-chairs

或

this.selectedChairs // because props: true binds to the props

此页面提供了有关使用router-link传递参数的更多信息：https://router.vuejs.org/en/api/router-link.html

正如我所说，我认为这不是一个好主意。即使您没有使用Vuex，使用某种有状态组件也可以做得更好。然后，您可以在您的州内设置selected-chairs，order组件只知道有关他们的选择。这允许你做一些事情，比如有一个迷你篮子，对用户将东西放入他们的篮子等做出反应。

设置一个简单的Vuex系统并不复杂，网上有各种文章可以帮助我推荐这种方法。

Answer 2

以上答案是正确的，但页面加载后将显示空白页面。

要解决此问题，请执行以下操作：

export default new Router({
    routes: [{
      path: '/order/:selected-chairs?',
      name: 'Order',
      component: Order,
      props: true
    }]
}

如您所见，我在path参数的前面添加了一个问号（？）

Vue.js将数组从一个页面传递到另一个页面

2 个答案: