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

我使用的是vue.js，我有一个组件，用户可以在其中选择他们想要的内容，然后点击“订购”。此时我使用<router-link to="/order">来显示新页面。但我不知道如何从那里的前一个组件访问数组。我尝试了这样的:selected-chairs="selectedChairs"，并在其他组件props: ['selectedChairs']，但它不起作用。我的路线文件（index.js）：Vue.js将数组从一个页面传递到另一个

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

来源

2017-11-11 xtrontross

您使用的是Vuex吗？ – WaldemarIce

@WaldemarIce不，我不使用Vuex – xtrontross

[Vue：不同页面之间共享数据]的可能重复（https://stackoverflow.com/questions/40953496/vue-shared-data-between-different-pages） –

这是可能的，做你想做的事，但我不认为这是一个好主意。首先，在与你原来的问题行，这是你可以做什么：

设置您的订单路线：

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上传递PARAMS信息https://router.vuejs.org/en/api/router-link.html

正如我所说的，我不认为这是一个好主意。即使你不使用Vuex，使用某种有状态组件也可以做到这一点。然后，您可以将selected-chairs设置为您的状态，order组件将只知道关于它们被选中。这可以让你做一些事情，比如有一个迷你篮子，可以让用户在篮子里输入东西等等。

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

来源

2017-11-11 22:08:33 webnoob

非常感谢！帮了很多。我用vuex，它正在工作，就像我需要它:)。 – xtrontross

不是一个问题，很高兴听到它。 – webnoob

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

回答

相关问题