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

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 组件将知道它们被选中。这允许您做一些事情，例如拥有一个迷你篮子，可以对用户将东西输入篮子等使用react。

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