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}
	}
}