摘要：文檔在及其更高版本中，和將會在樹內(nèi)的所有嵌套組件中觸發(fā)。另外，在我們的項(xiàng)目中遇到路由相同但參數(shù)不同的情況組件被復(fù)用，不更新的問題，官方給出了響應(yīng)路由參數(shù)變化根據(jù)參數(shù)數(shù)據(jù)響應(yīng)

在開發(fā)中經(jīng)常有從列表跳到詳情頁，然后返回詳情頁的時(shí)候需要緩存列表頁的狀態(tài)（比如滾動位置信息），這個(gè)時(shí)候就需要保存狀態(tài)，要緩存狀態(tài)；vue里提供了keep-alive組件用來緩存狀態(tài)。
可以用以下幾種方案解決問題；

直接上代碼,
1、首先在路由中的meta標(biāo)簽中記錄keepAlive的屬性為true

    path: "/classify",
    name: "classify",
    component: () => import("@/views/classify/classify.vue"),
    meta: {
      title: "雷石淘券券",
      keepAlive: true
    }
  },

2、在創(chuàng)建router實(shí)例的時(shí)候加上scrollBehavior方法

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return {
        x: 0,
        y: 0
      }
    }
  }
})

3/在需要緩存的router-view組件上包裹keep-alive組件

4、由于有些情況下需要緩存有些情況下不需要緩存，可以在緩存的組件里的路由鉤子函數(shù)中做判斷

beforeRouteLeave (to, from, next) {
    this.loading = true
    if (to.path === "/goods_detail") {
      from.meta.keepAlive = true
    } else {
      from.meta.keepAlive = false
     // this.$destroy()
    }
    next()
  },

支持可以支持組件的緩存，但是這種方法有bug，首先第一次打開頁面的時(shí)候并不緩存，即第一次從列表頁跳到詳情頁，再回來并沒有緩存，后面在進(jìn)入詳情頁才會被緩存
并且只會緩存第一次進(jìn)入的狀態(tài)，不會重新請求數(shù)據(jù)，如果當(dāng)頁面A選中一個(gè)分類跳到B頁面，再從B列表頁面跳往詳情頁，此時(shí)會緩存這個(gè)狀態(tài)，并且以后再從A頁面的其他分類跳到B頁面都不會重新被緩存，以至于每次從詳情頁返回B頁面都會跳第一次緩存的狀態(tài)；當(dāng)你的項(xiàng)目只有一種狀態(tài)需要緩存，可以考慮使用這種方法

首先介紹一下include和exclude vue文檔(https://cn.vuejs.org/v2/api/#...
是在vue2.0以后新增的屬性
include是需要緩存的組件；
exclude是除了某些組件都緩存；
include 和 exclude 屬性允許組件有條件地緩存。二者都可以用逗號分隔字符串、正則表達(dá)式或一個(gè)數(shù)組來表示：

匹配首先檢查組件自身的 name 選項(xiàng)，如果 name 選項(xiàng)不可用，則匹配它的局部注冊名稱 (父組件 components 選項(xiàng)的鍵值)。匿名組件不能被匹配。

max只在2.5.0新增，最多可以緩存多少組件實(shí)例。一旦這個(gè)數(shù)字達(dá)到了，在新實(shí)例被創(chuàng)建之前，已緩存組件中最久沒有被訪問的實(shí)例會被銷毀掉。

簡單介紹一下在被keep-alive包含的組件/路由中，會多出兩個(gè)生命周期的鉤子:activated 與 deactivated。
文檔：在 2.2.0 及其更高版本中，activated 和 deactivated 將會在 樹內(nèi)的所有嵌套組件中觸發(fā)。
activated在組件第一次渲染時(shí)會被調(diào)用，之后在每次緩存組件被激活時(shí)調(diào)用。
activated調(diào)用時(shí)機(jī)：
第一次進(jìn)入緩存路由/組件，在mounted后面，beforeRouteEnter守衛(wèi)傳給 next 的回調(diào)函數(shù)之前調(diào)用：

beforeMount=> 如果你是從別的路由/組件進(jìn)來(組件銷毀destroyed/或離開緩存deactivated)=>mounted=> activated 進(jìn)入緩存組件 => 執(zhí)行 beforeRouteEnter回調(diào)

因?yàn)榻M件被緩存了，再次進(jìn)入緩存路由/組件時(shí)，不會觸發(fā)這些鉤子：// beforeCreate created beforeMount mounted 都不會觸發(fā)。

deactivated：組件被停用(離開路由)時(shí)調(diào)用
使用了keep-alive就不會調(diào)用beforeDestroy(組件銷毀前鉤子)和destroyed(組件銷毀)，因?yàn)榻M件沒被銷毀，被緩存起來了。
這個(gè)鉤子可以看作beforeDestroy的替代，如果你緩存了組件，要在組件銷毀的的時(shí)候做一些事情，你可以放在這個(gè)鉤子里。
如果你離開了路由，會依次觸發(fā)：

組件內(nèi)的離開當(dāng)前路由鉤子beforeRouteLeave => 路由前置守衛(wèi) beforeEach =>全局后置鉤子afterEach => deactivated 離開緩存組件 => activated 進(jìn)入緩存組件(如果你進(jìn)入的也是緩存路由

項(xiàng)目中緩存使用方法：
1、在創(chuàng)建的router對象上加scrollBehavior方法，同上；
2、將需要緩存的組件加在include屬性里

3、在beforeRouteEnter的next回掉函數(shù)里，對返回A頁面不需要緩存的的情況初始化，即將本來需要寫在created里的東西寫在這里；注意一定要將所有的需要初始化的數(shù)據(jù)要寫一遍，不然會有bug;所以不太推薦

beforeRouteEnter (to, from, next) {
    next(vm => {
      // 通過 `vm` 訪問組件實(shí)例
      if (from.path !== "/goods_detail") { // 一定是從A進(jìn)到B頁面才刷新
        vm.titleText = vm.$route.query.name
        vm.categoryUpper = vm.$route.query.categoryUpper
        vm.goods = []
        vm.page = 1
        vm.catsIndex = 0
        vm.is_search = false
        vm.getCats2()// 是本來寫在created里面的各種
      }
    })
  }

第三種方法和第二種相似，不同的地方在于，將需要緩存的組件保存到全局變量，可以在路由的鉤子函數(shù)里靈活的控制哪些組件需要緩存，那些不需要緩存；跟第二種方法相比，不需要每次再重新初始化數(shù)據(jù)，但是需要在vuex中保存數(shù)據(jù)；
上代碼
1、在創(chuàng)建的router對象上加scrollBehavior方法，同上；
2、將需要緩存的組件加在include屬性里

3、在store里加入需要緩存的的組件的變量名，和相應(yīng)的方法；

export default new Vuex.Store({
  state: {
    catch_components: []
  },
mutations:{
    GET_CATCHE_COMPONENTS (state, data) {
      state.catch_components = data
    }
}
})

3、在beforeRouteLeave鉤子函數(shù)里控制需要緩存的組件

beforeRouteLeave (to, from, next) { //要在離開該組件的時(shí)候控制需要緩存的組件，否則將出現(xiàn)第一次不緩存的情況
    this.busy = true
    if (to.path === "/goods_detail") { // 去往詳情頁的時(shí)候需要緩存組件，其他情況下不需要緩存
      this.$store.commit("GET_CATCHE_COMPONENTS", ["home"])
    } else {
      this.$store.commit("GET_CATCHE_COMPONENTS", [])
    }
    next()
  },

以上是在vue項(xiàng)目里使用keep-alive的情況，網(wǎng)上有一些配合this.$destroy()方法使用的，但我在使用過程中驗(yàn)證了，并不好用；如果有多個(gè)狀態(tài)，并且有選擇的緩存，那么第三個(gè)方法是最好的選擇；如果你不想用vuex使用第二種方法也可以，但需要注意初始化數(shù)據(jù)。

另外，在我們的項(xiàng)目中遇到路由相同但參數(shù)不同的情況組件被復(fù)用，不更新的問題，vue官方給出了 響應(yīng)路由參數(shù)變化

watch: {
    "$route" (to, from) {
      document.title = this.$route.query.name
      this.getDefault() //根據(jù)參數(shù)數(shù)據(jù)響應(yīng)
    }

  },