Vue uses keep alive to realize page caching

Recently encountered a demand , Jump from a Kanban page to another page and then return to the Kanban page , You need to locate the position before jumping . Mainly used vue Of keep-alive, The overall implementation of the function is not difficult , But summarize some problems encountered in the implementation process .

1.keep-alive brief introduction

Official website Portal

2. Route modification

To distinguish whether different routes are cached or not , In routing configuration meta add to keepAlive Field , modify App.vue

//router.js
{
    
  path: '/xxx',
  name: 'xxx',
  component: ()=>{
    }
  meta: {
    
    keepAlive: true // Adding keepAlive attribute 
  }
}
//app.vue
<!-- Routes that will be cached -->
<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- Routes that will not be cached -->
<router-view v-if="!$route.meta.keepAlive"></router-view>

3. matters needing attention

Use keep-alive The route of the package will have two more hook functions deactived( By keep-alive Called when the cached component is deactivated ),actived( By keep-alive Called when the cached component is activated ). In addition, use keep-alive The package component will only call once created,mounted Wait for the hook function , If you request data after a route change, be sure to actived Re request data in hook function .

4. Cache page height practice

Cache page height guidelines , stay deactived When the hook function is executed, the scroll bar height of the page is cached , stay actived Dynamically set the height of the page scroll bar . In the code example given , Suppose that main-container Two components are introduced in , The height of the two components is relatively high , More than one screen .window._.debounce It uses lodash.js Method . Due to the remaining problems of code structure , The page exceeds the display scroll bar, which is only displayed in main-container In the container .

...
// Leave the page , Record the height of the container scroll bar 
deactivated () {
    
  this.scrollY = this.$refs['mainDom'].scrollTop
},
// Enter the page , Set the height of the container scroll bar 
activated() {
    
  this.$refs['mainDom'].scrollTo({
    top: this.scrollY,left: 0})
}
...

myth ：

After page scrolling , Use document.getElementsByClassName obtain DOM, Print is empty . The reason is that it is implemented until deactivated When you hook, the page has jumped , At this time document It is no longer the current page , Therefore, obtained DOM non-existent .

stay deactivated Later, I found that when I reached this step this The instance points to the current page , Use of software this.$refs obtain , Print out scrollTop by 0（ I don't understand here , Scrolled but no data , May be dom Elements have changed ）

Alternatives

stay mounted Listen for scrolling events when , Dynamic settings scrollY, stay activated Set it up when .

mounted(){
    
  this.$refs['mainDom'].addEventListener('scroll', window._.debounce(() => {
    
    this.scrollY = this.$refs['mainDom'].scrollTop
  },150), false)
},

Additional requirements

If B The route cache is set for the route , from B Route back to the superior A Routing does not want to cache routes , from B Route jumps to lower level C Route wants to cache routes . The function is also very simple , Dynamically set in the routing hook function meta Inside keepAlive It's worth it OK 了 .

beforeRouteLeave(to, from, next) {
    
  const {
    name} = to
  if(name == 'A Route name '){
    
    from.meta.keepAlive = false
  }else{
    
    from.meta.keepAlive = true
  }
  next();
}

Complete code

<template>
  <div class="main-container" ref="mainDom">
   	<template1 ref="template1 "/>
   	<template2 ref="template2 "/>
  </div>
</template>

<script>
import template1 from 'xxx/xxx/template1.vue'
import template2 from 'xxx/xxx/template2.vue'
export default {
    
  components:{
    
    template1, template2
  },
  beforeRouteLeave(to, from, next) {
    
    const {
    name} = to
    if(name == 'A Route name '){
    
      from.meta.keepAlive = false
    }else{
    
      from.meta.keepAlive = true
    }
    next();
  },
  data(){
    
    return{
    
	  scrollY:0
	}
  }
  mounted(){
    
    this.$refs['mainDom'].addEventListener('scroll', window._.debounce(() => {
    
      this.scrollY = this.$refs['mainDom'].scrollTop
    },150), false)
  },
  deactivated () {
    
    
  },
  activated() {
    
    this.$refs['mainDom'].scrollTo({
    top: this.scrollY,left: 0})
  }
}
</script>

<style lang="scss" scoped>
.main-container{
    
  height: 100vh;
  background: #EEEEED;
  overflow-y: scroll;
  box-sizing: border-box;
  padding-top: 0.6rem;
  ...
}
</style>