关于javascript:Vue.js将数组从一页传递到另一页

Vue.js passing array from one page to another

我正在使用vue.js,我有一个组件,用户可以在其中选择所需的内容,然后按" order "。此时,我使用<router-link to="/order">来显示新页面。但是我不知道如何从那里的上一个组件访问数组。我尝试了类似:selected-chairs="selectedChairs"的方法,而在其他组件中尝试了props: ['selectedChairs']的方法,但是它不起作用。
我的路线文件(index.js):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Select',
      component: Select,
      props: true
    },
    {
      path: '/order',
      name: 'Order',
      component: Order,
      props: true
    }
  ]
})


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

设置您的订购路线:

1
2
3
4
5
6
7
8
export default new Router({
    routes: [{
      path: '/order/:selected-chairs',
      name: 'Order',
      component: Order,
      props: true
    }]
}

然后您将具有如下链接:

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

或者您可以

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

这将允许您使用以下方法访问组件上的数据:

1
this.$route.params.selected-chairs

1
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系统并不复杂,网络上有很多文章可以帮助我,这是我推荐的方法。


以上答案是正确的,但在页面加载时将显示空白页面。

要解决此问题,请执行以下操作:

1
2
3
4
5
6
7
8
export default new Router({
    routes: [{
      path: '/order/:selected-chairs?',
      name: 'Order',
      component: Order,
      props: true
    }]
}

如您所见,我在路径参数的前面添加了一个问号(?)