Vue keep-alive的那些事

上个班，才发现，下个月都过年了，距离年初你定的目标，怎么样了，是不是又荒废了一年，还是收货满满。看看年初的代码，是不是跟个米田共一样。走吧，走吧，走吧，人总要学着自己长大。

keep-alive

<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM；包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

<keep-alive include="list1">  // 'name'
	<router-view></router-view>
</keep-alive>
<keep-alive exclude="list2">
	<router-view></router-view>
</keep-alive>

• include: 字符串或正则表达式。只有匹配的组件会被缓存。
• exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

配合meta

export default[
 {
  path:'/',
  name:'home',
  components:Home,
  meta:{
    keepAlive:true //需要被缓存的组件
 },
 {
  path:'/about',
  name:'about',
  components:About,
  meta:{
     keepAlive:false, //不需要被缓存的组件
     xxx:xxx		  //可以自定义参数,通过 this.$router.meta.xxx获取		
 } 
]

<keep-alive>
  <router-view v-if="this.$route.meta.keepAlive"></router-view>
  <!--这里是会被缓存的组件-->
</keep-alive>
<keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive>

这就是一个正常普通的案例

但是实际项目当中还有好多需求。就是从xxx页面进来不需要缓存，从xxx页面需要。一个页面缓存了，但从xx页面过来需要重置，哪些不需要

{
  name:'app',
  path:'/app',
  component:App,
  meta: {
    keepAlive:true,
    isNeed: true,
  },
}

beforeRouteEnter(to, from, next) {
  if (from.path == "/applist") {
      to.meta.isNeed= true;
    } else {
      to.meta.isNeed= false;
    }
    next();
},

activated() {
  if (!this.$route.meta.isNeed) {
    this.xxx()
  }else{
    this.$route.meta.isNeed= false;
    this.xxx()
  }
},

scrollBehavior

scrollBehavior(to,from,savePosition)函数，函数有三个参数。scrollBehavior() 函数在点击浏览器的“前进/后退”，或者切换导航的时候触发。

scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”，或者切换导航的时候触发。
    console.log(to) // to：要进入的目标路由对象，到哪里去
    console.log(from) // from：离开的路由对象，哪里来
    console.log(savePosition) // savePosition：会记录滚动条的座标，点击前进/后退的时候记录值{x:?,y:?}
}

页面离开之前判断是否keepAlive 记录位置

  beforeRouteLeave (to, from, next) {
    let position = window.scrollTop();
    localStorage.setItem("scrollTop",position)
    if(to.path=='/textDetail'){
      if(!from.meta.keepAlive){
          from.meta.keepAlive = true
      }
      next()
    }else {
      from.meta.keepAlive = false;
      from.meta.keepAlive = false;
      next()
      window.location.reload()
    }
  },

scrollBehavior(to,from,savePosition){ 
	if(!to.meta.keepAlive){
		return savePosition
	}else{
		if(to.meta.keepAlive){
			to.meta.savePosition = Number(localStorage.getItem('scrollTop'))
		}
		return {x:0,y:to.meta.savePosition || 0}
	}
}