快捷導(dǎo)航

vue中keep-alive，include的緩存問(wèn)題

更新時(shí)間：2019年11月26日 09:55:16 作者：Vicky-Rong

這篇文章主要介紹了vue中keep-alive，include的緩存問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前提：有A,B,C,D四個(gè)頁(yè)面,A是按鈕頁(yè)(點(diǎn)擊按鈕進(jìn)入B頁(yè)面)，B是訂單列表頁(yè)，C是訂單詳情頁(yè)，D是費(fèi)用詳情頁(yè)

需求：順序是A->B->C->D,每次都刷新頁(yè)面，D->C->B時(shí)走緩存，但是每次從A到B都要刷新B頁(yè)面，從B到C需要刷新C頁(yè)面，從C到D要刷新D頁(yè)面

在vue官方文檔2.1以上有include 和 exclude 屬性允許組件有條件地緩存。在這里主要用include結(jié)合vuex來(lái)實(shí)現(xiàn)（四個(gè)頁(yè)面組件都有自己的name才會(huì)生效，這里name就叫A,B,C,D）

從D->C，從C->B，從B->A 可以寫(xiě)一個(gè)公共的頭部返回組件，統(tǒng)一使用 this.$router.go(-1)返回前一頁(yè)

App.vue

<template>
 <div class="app">
  <keep-alive :include="keepAlive" >
   <router-view/>
  </keep-alive>
 </div>
</template>

<script type='text/javascript'>
export default {
 data () {
  return {}
 },
 computed: {
  keepAlive () {
   return this.$store.getters.keepAlive
  }
 }
}
</script>

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
 state: {
  keepAlive: []
 },
 mutations: {
  SET_KEEP_ALIVE: (state, keepAlive) => {
   state.keepAlive = keepAlive
  }
 },
 getters: {
  keepAlive: state => state.keepAlive
 }
})

每次進(jìn)入B頁(yè)面時(shí)先初始化 keepAlive(設(shè)置要走緩存的頁(yè)面)

A.vue

<script>
  export default {
    name: 'A',
    methods: {
      buttonClick () {
        this.$store.commit('SET_KEEP_ALIVE', ['B', 'C', 'D']) 
　　　　　　　　　 this.$router.push('/B') 
　　　　　　　} 
　　　　　} 
　　}
</script>

B.vue 該頁(yè)面用來(lái)設(shè)置緩存和清除緩存

<script>
  export default {
    name: 'B',
    beforeRouteEnter (to, from, next) {
      next(vm => {
        if (from.path.indexOf('C') > -1) {
          vm.$store.commit('SET_KEEP_ALIVE', ['B'])
        }
      })
    },
    beforeRouteLeave (to, from, next) {
      if (to.path.indexOf('C') > -1) {
        this.$store.commit('SET_KEEP_ALIVE', ['B', 'C'])
      } else if (to.path.indexOf('A') > -1) {
　　　　　　　　　this.$store.commit('SET_KEEP_ALIVE', [])　
      }
      next()
    }
　}
</script>

到這里就實(shí)現(xiàn)了需求

PS：vue keep-alive include無(wú)效

檢查版本

確定當(dāng)前的vue版本的是2.1+

因?yàn)閕nclude和exclude是vue2.1.0新增的兩個(gè)屬性.

package.json

"vue": "^2.5.2",

檢查name

注意,不是router.js中的name,而是單個(gè)vue組件中的name屬性.

建議將router.js中的name和vue組件的name保持一致,不要混亂.

export default {
  name: "index"
}

多層嵌套

網(wǎng)上的答案幾乎都是檢查vue組件的name屬性,但還是有一個(gè)巨坑.

那就是多級(jí)嵌套<router-view></router-view>,但凡有超過(guò)兩個(gè)以上的router-view且是父子級(jí)關(guān)系,請(qǐng)都加上keep-alive,只加一個(gè)不會(huì)生效.

// app.vue
<keep-alive include="app,index">
  <router-view></router-view>
</keep-alive>

// other.vue
<keep-alive include="app,index">
  <router-view></router-view>
</keep-alive>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: