Requirements:

User list page (User /list) has done a lot of filtering, sorting, paging and other operations, click the user name, enter the user details page (user/list/: ID), after browsing the details, need to return to the list page. At this point, if there is no reservation filtering condition or paging condition, the list page will present the initialization state, and users will have to repeat a lot of work to get the previous filtering result page, resulting in poor user experience.

Solutions:

1: LocalStorage retains all filtering conditions and paging conditions when users enter the details sub-page. When entering the list page again, read the filter condition from localStorage to query. The scheme works, but in similar cases for the whole project, each page has to be added, and the subsequent deliverable work may forget the retention filter condition

2: It is feasible to use vue’s keep-alive built-in component and register to the global scheme by mixin method. It is not necessary to add it to every page once and for all. The only point is that the path of the list and details page should correspond

export default { beforeRouterLeave: (to, from, next) => { let toPath = to.path; let fromPath = from.path; if (toPath.startsWith(fromPath)){ from.meta.keepAlive = true; } else { from.meta.keepAlive = false; } next(); }, // keepAlive beforeRouterEnter: (to, from, next) => {let toPath = to.path; let fromPath = from.path; if (! fromPath.startsWith(toPath)){ to.meta.keepAlive = false; } next(); }}Copy the code

The mian. Js

   import keepAlive from '@/minxins/keepAlive';
   Vue.mixin(keepAlive)
   
Copy the code