Vue background to do with the management of projects, in particular a list of pages, list data details page, a list of function code data modification page faithful, almost all were vue forward and back all refreshed logic pit too, sometimes need to save component state,
requires:
1. List into the details page lists can not refresh returns a list of pages, even pages, and so can not change the filter criteria
2. List the data to the list edit page if there are changes to the data page returns a list of list data was refreshed, but the number of pages, and so can not change the filter criteria
3. Non-details page, a list of data have to refresh the page to enter the edit list page, number of pages, and so on Reset All Filters
Summarize what is' this page I want it to refresh the list, he would have to refresh, do not want to brush him, he did not change
So is Shane? Yes, keep-alive component, right, yes it is.
But the simple keep-alive is a forward-reverse will not be refreshed, so the need to transform it, to make it obey. This process needs to be routed routing parameters meta with us.
1. List the target set for the meta parameters in the routing file, which contains keepAlive and ifDoFresh field
复制代码
{
path:'*',
name:'datalists',
component: resolve => require(['@/view/datalist'], resolve),
meta:{
keepAlive: true,
ifDoFresh:false
}
},
Copy the code
2. Set the main entry pages main.vue whether keep-alive assembly according keepAlive field judgment.
复制代码
<div class="main">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"/>
</div>
Copy the code
3. judgment in beforeRouteEnter a target list of pages in the page mode of entry (details page, edit page, or otherwise), according to the needs of the field ifDoFresh routing parameter set to true / false,
In the activated page (opens keepAlive: true when the page is the second time not trigger mounted hair Act) method according to ifDoFresh field to determine whether to refresh the page.
Copy the code
beforeRouteEnter (to, from, Next) {
IF (from.name = 'Information page' && from.name = 'Edit page'!!)
{
To.meta.ifDoFresh = to true;
}
Next ();
},
activated ( ) {
// open the keepAlive: after re-entering the true, the previous search terms and pages will not change, no matter what the circumstances call about data acquisition interface, so you can get the latest data of the current search criteria and the number of pages
if (. route.meta.ifDoFresh the this $) {
// reset ifDoFresh
the this $ = route.meta.ifDoFresh to false;.
// list data acquisition method of the first parameter and the search condition is whether to reset pages
this.getData (true );
} the else {
this.getData ();
}
}
end!