Vue.js passing array from one page to another
我正在使用vue.js,我有一个组件,用户可以在其中选择所需的内容,然后按" order "。此时,我使用
我的路线文件(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 |
此页面提供有关使用
正如我所说,我认为这不是一个好主意。即使您不使用Vuex,也最好使用某种有状态组件来进行此操作。然后,您可以将
设置简单的Vuex系统并不复杂,网络上有很多文章可以帮助我,这是我推荐的方法。
以上答案是正确的,但在页面加载时将显示空白页面。
要解决此问题,请执行以下操作:
1 2 3 4 5 6 7 8 | export default new Router({ routes: [{ path: '/order/:selected-chairs?', name: 'Order', component: Order, props: true }] } |
如您所见,我在路径参数的前面添加了一个问号(?)