Project scenario:
When we use Vue to do projects, especially when there are list pages with many search conditions, after searching, we enter the details page, and then return to the list page from the details page to reset the data. We need to search again, which is particularly troublesome and unfriendly to use. .
So the more friendly requirements are as follows:
1. When entering the details page from the list page and returning to the list page, the number of pages, filter conditions, etc. cannot be changed, but the list must be refreshed and updated with the latest data.
2. When the list page enters the data editing page and then returns, the number of pages, filter conditions, etc. cannot be changed, but the list data needs to be refreshed with conditions.
3. When entering the list page other than the details page or edit page, the page number, filter conditions, etc. are all reset, and the list data is refreshed.
4. After pop-up operation on the list page, the data also needs to be refreshed with conditions.
Therefore, if I want this list page to be refreshed, it must be refreshed; if I don’t want it to be refreshed, it will remain unchanged.
So you can use keep-alive.
But a simple keep-alive will not refresh even if it goes forward or backward, so it needs to be modified to make it obedient. This process requires the routing parameter meta to cooperate with us.
For the multi-condition query in the figure below, if you need to re-enter the search conditions and search again every time you return to the list page after editing, it will cause people to crash.
solution:
Attached code (mainly to understand the above explanation, the following code is not very useful):
export default [
{
path: 'worksheetsSetting',
name: 'WorksheetsSetting',
meta: {
name: '工单设置',
keepAlive: true,
},
component: () => import('@/components/worksheetsSetting/index.vue'),
},
{
path: 'worksheetsSetting/detail/:id',
name: 'WorksheetsSettingDetail',
meta: {
name: '工单设置详情',
},
component: () => import('@/components/worksheetsSetting/detail.vue'),
},
{
path: 'worksheetsSetting/createNewCategory',
name: 'CreateNewCategory',
meta: {
name: '工单设置新建问题分类',
},
component: () =>
import('@/components/worksheetsSetting/createNewCategory.vue'),
},
{
path: 'worksheetsSetting/editCategory/modify/:id',
name: 'EditCategory',
meta: {
name: '工单设置编辑问题分类',
},
component: () => import('@/components/worksheetsSetting/editCategory.vue'),
},
];
beforeRouteEnter(to, from, next) {
if (from.name == 'WorksheetsSettingDetail' || from.name == 'EditCategory') {
next(vm => {
vm.doSearch();
});
} else {
next(vm => {
vm.doResetParams();
});
}
},