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

Question

我正在使用 vue.js，我有一个组件，用户可以在其中选择他们想要的内容，然后点击 "order"。此时我使用 <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
    }]
}

然后您可以像这样 link：

<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
    }]
}

如你所见，我在路径参数前面加了一个问号(?)

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

Vue.js passing array from one page to another

javascript

vue.js

vue-router