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將數組從一個頁面傳遞到另一個

回答

相關問題