Method for implementing simple pages inversion values ​​in VUE

The need to achieve is simple, the page is triggered from A -> B. The user triggers an operation in B, bring some data back to the A page, find online I only saw someone asking for a long time, but I can’t find a good answer. The effect map to be achieved is as follows:

在vue中实现简单页面逆传值的方法 [Lenovo]

In IOS development, page jump A -> B – > C, after the c page, the data and status of the A and B pages have been stored in the memory, and the previous page can be modified by the navigation stack. There is also a proxy, block pass value and other operations.

VUE is a single page application, lightweight, and does not download data. When it jumps from a page to another page, the Vue instance and related data of the original page have been destroyed, and the object to be used to find the object and some of its properties.

Print route information in the Three page, as follows:

I originally think Viewing whether there is an operable object in its object, but it is not good to operate or even more troubles, not just like IOS. Then try some object prototype or __proto__ to add data you want to store, the actual result is either an error, or the data is not passed when it is switched. 在vue中实现简单页面逆传值的方法

After two days, I repeatedly saw the official website guidance of Vue, and found that there were several corresponding hook functions for component routing in addition to the overall routing.

In the third page, BeforeROUTELEAVE is implemented, and the corresponding parameters of printing finders can indeed get the front and rear routes. As shown in


/ three page in the INPUT in the page is bound to this pageIn the routing method of the surface, it is determined that if it is back to the second page, the parameter to be transmitted to the corresponding query or params, the value in params will be lost if the user refreshes the current page parameter value, and query is stitching behind the URL The refresh page value will not be lost. As follows:

BeforouteLeave (to, from, next) {if (to.Name == ‘two’) {to.query.temp = this.selval;} next ()

Take the corresponding value in the moused method of the / TWO page
mounted () { IF (this. $ route.query.temp) {this.temp = this. $ route.query.temp;}}

This is over, I really want to say a sentence Rely, I didn’t find it. I have achieved KeePalive or use Vuex, and I think more.
 PS: This simple reverse value is true, but if the / two page is a large temporary operation in the user before entering the / three page, the / three page page will continue to remain These a large number of operations are more difficult, this will wait for the next blog.   Summary 
The above is a method of implementing a simple page reversal value in Vue to everyone, I hope that everyone can help, if everyone If you have any questions, please leave a message, the small package will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment