If you use the official keep-alive component, there are two unavoidable problems: how to kill the cache at the right time (setting the maximum number of caches is a simple but not very effective solution), and how to create two instances of the same component in the cache.

Problem analysis:

Vue-router is an official plug-in in vue. js to help us achieve SPA. Meanwhile, in order to improve the secondary response speed of the page, vue. js provides an official keep-alive component to help us cache the page. However, in many scenarios, keep-alive and vue-Router are not perfect. Requires extremely complex special processing, to name two common business scenarios (premise: pages are all keep-alive) :

  1. Switch from page A to page A (for example, switch from the product details page to the product details page) (Two instances of page A need to be created)
  2. When page A jumps to page B and returns to page A (destroy page B at this time)

Common problems with scenario 1 (which can be skipped) are:

  1. If I don’t do anything about it,keep-alivetheA pageCache, go in againA pageAfter creating a Vnode, the Vue instance cached before will be directly used. Therefore, the route will not go through the life cycle although there are changescreatedMethods. This needs to be handled separately, listening$routeAnd then take outqueryTo rerequest data.
  2. Now if I go back, I’m actually still going to go to$routeThe page is cached, but the previous data is not cached. In this case, a common approach is to maintain a Map and save the corresponding dataqueryRequest data, which undoubtedly increases the complexity of the code.
  3. We often need to record the scrolling position of the page, when returning to the current page is to scroll to the corresponding position, this time undoubtedly also need to separate$route.queryTo save the scrolling position, adding complexity.

Question for scenario 2 (which can be skipped) :

  1. A pagejumpPage B, and then jump againPage BIf there is no rightPage BProcess, at this pointPage BThe life cycle of theactivited), because the Vue instance has already been created, it is fetched directly from the previous cache and does not need to be recreated. There are many ways to solve this problem<router-view/>Add the binding of dynamic keys to each jumpPage B, using the current time to change the binding Key, so enter againPage BIt determines that it is a new instance and recreates it.
  2. If the problem is solved using the above method, it will lead to the new problem of how to destroy the cached page B. Not at this timebeforeRouterLeaveIf your page has A custom return key, you need to destroy the current instance and update the cache map and keys, but if there is A physical return key or browser return key, this method will not work. So we need an exact return hook to destroy the page

How to trust

If you have any of these problems, you have the same problem I have. The expected result is that A->A->A will create three Vue instances, and will automatically destroy the current instance on return. Secondly, this scheme can not be intrusive to the existing project, without modifying the code.

All right, let’s not pretend, let’s show our cards:

Introduce the library vue-router-keep-alive-Helper in your project

npm i -s vue-router-keep-alive-helper
Copy the code

Use createHelper after creating the VueRouter

Import createHelper from 'vue-router-keep-alive-helper' // add import vue from 'vue' const router = new VueRouter({routes}) createHelper({Vue, router}); / / addCopy the code

I don’t care about anything else. Take a look at the introduction of the library,Making the address Bilibili demo video

PS: Note that the Vue devtool has a small BUG. When you return, the instance and cache are destroyed, but you need to refresh the Devtool to see the update, but it has been destroyed, you can check the console log.

Welcome to leave comments and discuss