Keep-alive is a built-in vue component that, in plain English, caches whatever you want to cache into memory to avoid re-rendering the Dom. Vue itself is a single page. Keep-alive provides include/exclude for single pages and for mode:history mode after version 2.1.0 to cache corresponding components. After version 2.2, the beforeRouteUpdate hook function was added.

Application scenario: The cache is available only when you enter B from PAGE C, and the cache is cleared when you enter any other page and returns to the initial state

Configure the index.js file in the router file

2. Cache the entire template and configure app.vue, the main page

Need attention Need attention Need attention Important things three times

If the router view is loaded in keep-alive, it cannot be cached.Copy the code

3. Since only page B is cached, hook functions controlling cache are placed on page B in order to reduce unnecessary redundancy

There are two important points to understand:

1. Load order of lifecycle hook functions

If keep-alive is enabled successfully, you can consider calling two new hook functions: activated and deactivated

If keep-alive is enabled for the first time, only activated is triggered when the cache is reentered (forward or backward), and deactivated is triggered when the cache exits.

    beforeCreate->created->beforeMount-> mounted-> activated
Copy the code

Note: With keep-alive, calling $destory() needs to be done with care, otherwise the page is no longer cached

2. Guard inside vue-router:

4. Cache setting B page

Android from other pages!! First time!! After entering, the phone has its own back button to return the first time, can not cache, the second time is normal cache ！！！！！！ The page of pit 1 and page B can be re-refreshed through reload according to the parameters of url. If/B /2 is entered from A, / B /2 is entered from /c/2, and then the page is returned to the position before/B /2.

At this time, from A entry/b / 1, and 1 into/through/b/c / 1, return back to cache is A/b / 2 still jump in front of the positionCopy the code

Solution: Keep going down a dead end, circling the guard of the routing component, considering how to clear the last cache, and find a way to find the corresponding cache by obtaining nodes layer by layer.

$deStory () : $destory() : $destory() : $destory() : $destory() : This.$router.push, this.$router.push, this.$router.push. Such caches are recorded in beforeRouteLeaveCopy the code

2. After android enters /b/1 from page A < first time >, enter /c/1 through /b/1, and return from C to B, the phone’s own back button returns for the first time, which cannot be cached, and the second time is normal cache (the browser’s own and own even return everything is normal)

Solution: In beforeRouteEnter, determine whether to go to C, modify the keepAlive in route to cacheCopy the code

3. When wechat real-time sharing is involved, the cache is retrieved when it is returned, and the shared data will still record the sharing status of the previous C page

Solution: Refer to the loading order of lifecycle hook functions in point 3, Number 1

Questions about Android physics return need to be added…