Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.

This article also participated in the “Digg Star Project” to win the creative gift package and challenge the creative incentive fund **

Hello! Dear friends of the Gold diggers, I am a little public action. In the last article, I introduced my # countdown function. Today, I will introduce you to keep-alive cache the current list page and record the scrolling position of the page. But SOMETHING went wrong when I used it and it took me a long time to find the problem; Specific encounter what problems to sell the first pass;

The text begins ~

Keep-alive caches the current list page

Sometimes we don’t want components to be re-rendered to affect the experience; Or for performance reasons, avoid repeated rendering that degrades performance. Instead, you want the component to be cached and maintain its current state. This is where the keep-alive component can be used.

The first way

First, add the keep-alive code to the page of vue project app. vue

<keep-alive> <router-view v-if="$route.meta.keepAlive" /> </keep-alive> <router-view v-if="! $route.meta.keepAlive" class="sadsds" />Copy the code

Then set keepAlive to true for the route to the cached page in the router file. To cache all pages, keepAlive is true for all routes. To cache partially, keepAlive is false for routes that do not cache pages

The second way

Include – a string or regular expression. Components with matching names are cached.

< keep alive: - include = "[' TabList]" > < the router - view / > < / keep alive - > / / multiple writes: include = "[' TabList ', 'list']" Add name:'TabList' to export default of the page to be cached;Copy the code

This can achieve the effect of caching pages

Exclude – a string or regular expression. Any component with a matching name will not be cached. (Grammar as above)

Max – Numbers. Maximum number of component instances can be cached.

<keep-alive :max="10">   <router-view /> </keep-alive>
Copy the code

I didn’t even use it to cache pages; I was jumping from the list to the details, and then the details back to the list; I added a code to the detail page that made my keep-alive code invalid; To this day I don’t know why this is wrong;

(If you know, please tell me, I also want to know)

beforeRouteEnter(to, from, next) { if (to.path ! == global.location.pathname) { location.assign(to.fullPath) } else { next() } },Copy the code

Record the scrolling position of the page

Start by adding the ref attribute to the page where you want to cache the scrolling position of the toggle record to get the DOM element

Add the two lifecycle function hooks to this page; In Mounted, retrieve the DOM of the parent element of the scroll element, and add a listening scroll event to retrieve the scroll height. Then record the scrolling position in ativated

Activated () {// When the route component is activated, Record the scroll position this $refs. ArticleListRef. ScrollTop = this. ScrollTop}, Mounted () {const artListDom = this.articlelistref (); // Record after rolling the top position artListDom. AddEventListener (' scroll '() = > {this. ScrollTop = artListDom. ScrollTop})},Copy the code

Conclusion:

Well, that’s the end of the article; Schiller wrote two articles in one day; I wonder if the Nuggets will give me a model award. Writing articles makes my head spin; Because IN the course of writing the article I did it again in code and I got a few bugs and it took a little bit of time to fix them; Hope this article is helpful to you;

(Like + comment + follow) If you have any questions, please come to communicate with each other

“Welcome to the discussion in the comments section. The excavation authorities will draw 100 nuggets in the comments section after project Diggnation. See the event article for details.”