Requirements Analysis
background:
1. Data list page, scroll to load data;
2. In the case of multiple pieces of data, click on a certain piece of data and enter the detailed page to edit (modify, delete) operation;
3. Save and return to the previous page;
In the above case, you want to keep it in the last browsing position and keep the data up to date;
Solution
1. Original method: When clicking on the details page, remember the browsing location, pass the parameters or save it to the local cache, and then after the details page operation is completed and when returning, the route guard can determine whether the details page has been redirected, and then let the page scroll to the location recorded last time;
This is the idea, and it is very troublesome to actually operate;
2. Recommended method: use the vue dynamic component keep-alive, match the route guard function beforeRouteLeave, and the activated hook function;
For the execution order of hook function and detailed description of function, please refer toLifecycle of vue component
Steps detailed explanation
My steps are carried out according to the development idea, and the scenario is from the product list page -> product details page -> product list (data cache);
Before development, I saw that many people on the Internet were configuring the routing files.
meta:{keepAlive:true}
But I don't think it is necessary, because the list page does not always need to cache data. If you enter from the home page, it is not necessary, so just judge whether the data needs to be cached in the route guard function;
The following code uses the representative list page; represents the detailed page;
Scenario 1: Click to return to determine whether the route jumps to the list page that needs to be cached:
beforeRouteLeave (to, from, next) {
if ( === 'M2mBoard') {
= true
}
next()
}
Since keepAlive is a built-in component in vue 2.0, set page routing = trueYou can cache data, and routing is to use functionsthis.$(-1)；It can be displayed in the last browsing record location;
Scene 2: Edit the detailed page data and return to the list page, you need to save the modified data locally, and then change the display in the cached data of the list page:
beforeRouteLeave (to, from, next) {
if ( === 'M2mBoard') {
= true
}
if () {
let changeData = {
inquiryNo: ,
inquiryTitle:
}
('changeData', (changeData))
}
=
next()
}
Check whether the data needs to be modified in the list page:
activated () {
if (this.$) {
let changeData = (('changeData'))
(item => {
if ( === ) {
=
}
})
}
}
The activated hook function is automatically executed when the keep-alive component is activated. It determines that if modification is needed, extract data from the local area, loop the list of data, find out which item needs to be modified, and modify the display data (because it is a temporary modification, only the displayed parameters can be modified);
Scene 3: Click to delete the data on the detailed page
beforeRouteLeave (to, from, next) {
if ( === 'M2mBoard' && !) {
= true
}
next()
}
The deletion operation can be excluded and cached directly, or the same operation as modifying, and it is judged to be deleted or temporarily deleted, and the cached data in the list can be also possible;
The above three situations usually occur at the same time, so the final way is:
beforeRouteLeave (to, from, next) {
if ( === 'M2mBoard' && !) {
= true
}
if () {
let changeData = {
inquiryNo: ,
inquiryTitle:
}
('changeData', (changeData))
}
=
next()
}
beforeRouteLeave (to, from, next) {
= false
next()
},
activated () {
if (this.$) {
let changeData = (('changeData'))
(item => {
if ( === ) {
=
}
})
}
}
When the list page is routed, the = false operation is required to prevent it from happening. After jumping back, when routing with other pages, it is always in a cache state and the data is not updated;
Note: The routing activity is best used in jumpthis.$(-1), otherwise, when you return to the page, the data will be cached, but the page location will not be the location you visited last time; the specific reason is still under research, hahaha...
OK, the above is the whole idea of keep-alive used in project development and use; record it to avoid forgetting, and you also welcome reference and correction.
The above is the Vue keepAlive data cache tool introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time!