Hello to all!

There are two routes.

const routes = [ {path: "/items", component: Items}, {path: "/item/:id", component: OneItem} ];

In the Items component, I receive data from the server about all the products and display them in the form of links. When you click on one of the links, you are taken to the page of one product, in other words, we get into the OneItem component. What is the right way to get already downloaded data from the Items component from the OneItem component?

Thank you all responded!

  • You can receive data in the parent element and have access to it through this. $ parent.List of products. But this is not exactly what you need. - Babaikawow

2 answers 2

For applications on vue.js there is a convenient module VueX . How to make it better to read the documentation.

But the principle of operation will be quite simple - in the Items component we load all the data into the storage (store). And further we use this data in any components.

    Made as follows (it may come in handy for newcomers like me):

     const Item = Vue.component('Item', function(resolve, reject) { ... // отправляем массив с данными перед изменением маршрута beforeDestroy: function() { this.$parent.$emit('sendData', this.data); }, ... ); const OneItem = Vue.component('OneItem', function(resolve, reject) { ... created: function () { let self = this; // отписываемся от события, иначе каждый раз их количество будет увеличиваться this.$parent.$on('sendData', function(data){ self.$parent.$off('sendData'); for( let i = 0; i < data.length; i++ ) { // здесь в цикле ищу данные для нужного товара } } }); });

    Here I used $ parent, since The components are global and they refer to the main instance of Vue, but you can create a separate instance of the "bus" and transfer data through it. If the transmission via the "bus" is preferable, I will be grateful for the explanation.