【vue学习】全方位把 keep-alive 搞清楚

1
<!-- 将（只）缓存组件name为a或者b的组件, 结合动态组件使用 -->
2
<keep-alive include="a,b">
3
  <component></component>
4
</keep-alive>
5

6
<!-- 组件name为c的组件不缓存(可以保留它的状态或避免重新渲染) -->
7
<keep-alive exclude="c">
8
  <component></component>
9
</keep-alive>
10

11
<!-- 使用正则表达式，需使用v-bind -->
12
<keep-alive :include="/a|b/">
13
  <component :is="view"></component>
14
</keep-alive>
15

16
<!-- 动态判断 -->
17
<keep-alive :include="includedComponents">
18
  <router-view></router-view>
19
</keep-alive>
20

21
<!-- 如果同时使用include,exclude,那么exclude优先于include， 下面的例子只缓存a组件 -->
22
<keep-alive
23
  include="a,b"
24
  exclude="b">
25
  <component></component>
26
</keep-alive>
27

28
<!-- 如果缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件 -->
29
<keep-alive
30
  exclude="c"
31
  max="5">
32
  <component></component>
33
</keep-alive>

1
<keep-alive include="a">
2
  <router-view>
3
    <!-- 只有路径匹配到的 include 为 a 组件会被缓存 -->
4
  </router-view>
5
</keep-alive>

1
<keep-alive>
2
  <router-view v-if="$route.meta.keepAlive"> </router-view>
3
</keep-alive>
4
<router-view v-if="!$route.meta.keepAlive"> </router-view>

1
<transition
2
  enter-active-class="animated zoomInLeft"
3
  leave-active-class="animated zoomOutRight">
4
  <keep-alive>
5
    <router-view v-if="$route.meta.keepAlive"> </router-view>
6
  </keep-alive>
7
</transition>
8
<transition
9
  enter-active-class="animated zoomInLeft"
10
  leave-active-class="animated zoomOutRight">
11
  <router-view v-if="!$route.meta.keepAlive"> </router-view>
12
</transition>

1
<keep-alive>
2
  <router-view v-if="$route.meta.keepAlive"></router-view>
3
</keep-alive>
4
<router-view v-if="!$route.meta.keepAlive"></router-view>

1
//...router.js
2
export default new Router({
3
  routes: [
4
    {
5
      path: '/',
6
      name: 'Hello',
7
      component: Hello,
8
      meta: {
9
        keepAlive: false, // 不需要缓存
10
      },
11
    },
12
    {
13
      path: '/page1',
14
      name: 'Page1',
15
      component: Page1,
16
      meta: {
17
        keepAlive: true, // 需要被缓存
18
      },
19
    },
20
  ],
21
})

1
const router = new VueRouter({
2
  mode: 'hash',
3
  routes,
4
  scrollBehavior(to, from, savedPosition) {
5
    // 此方法默认是检测 document.body 的，如果你是自定义的滚动盒子 是没办法控制你的滚动高度，都是 0
6
    console.log(savedPosition);
7
    // 如果返回一个 falsy(不是false) ，或者是一个空对象，那么不会发生滚动,说白了就是这个方法没用，并不会在页面顶部
8
    // falsy文档 https://developer.mozilla.org/zh-CN/docs/Glossary/Falsy
9
    if (savedPosition) {
10
      return savedPosition
11
    } else {
12
      if (from.meta.keepAlive) {
13
        // 这里并不准确，可能我页面滚动的盒子不是body,vue应该有设置的地方
14
        from.meta.scrollTop = document.documentElement.scrollTop;
15
      }
16
      return {x: 0, y: to.meta.scrollTop || 0}
17
    }
18
  },
19
});
20

21
export default router
22

23
scrollBehavior(to, from, savedPosition) {
24
  if (savedPosition) {
25
    return new Promise((resolve, reject) => {
26
      setTimeout(() => {
27
        resolve(savedPosition)
28
      }, 20)
29
    })
30
  } else {
31
    if (from.meta.keepAlive) {
32
      from.meta.scrollTop = document.documentElement.scrollTop;
33
    }
34
    return {x: 0, y: to.meta.scrollTop || 0}
35
  }
36
}

1
// B 组件
2
export default {
3
  data() {
4
    return {}
5
  },
6
  methods: {},
7
  beforeRouteLeave(to, from, next) {
8
    // 设置下一个路由的 meta
9
    // 让 A 缓存，即不刷新
10
    to.meta.keepAlive = true
11
    next()
12
  },
13
}

1
// C 组件
2
export default {
3
  data() {
4
    return {}
5
  },
6
  methods: {},
7
  beforeRouteLeave(to, from, next) {
8
    // 设置下一个路由的 meta
9
    // 让 A 不缓存，即刷新
10
    to.meta.keepAlive = false
11
    next()
12
  },
13
}

1
<template>
2
  <div v-if="isRouterAlive">
3
    <div>{{ddd}}</div>
4
    <input
5
      v-model="ddd"
6
      type="text" />
7
    <table-list
8
      ref="table"
9
      :multiple="true"
10
      :otherTableParams="otherTableParams"
11
      :tableColumn="column" />
12
  </div>
13
</template>
14
<script>
15
  export default {
16
    activated() {
17
      if (this.$route.meta.isRefresh) {
18
        // 如果不是跳转到详情页
19
        // 这里是模拟局部刷新的功能，建议直接在顶层添加局部刷新，可以避免重置data
20
        const resetData = this.$options.data() // 获取原来data的数据
21
        delete resetData.column // 我在这里操作的原因是因为，我通过上面获取的数据里面，用到函数返回的形式，展示为undefined  {cb: this.jumpEdit} 展示为 {cb: this.undefined},具体原因未知
22

23
        Object.assign(this.$data, resetData) // 重置data
24
        this.isRouterAlive = false // 通过v-if不展示当前页面
25
        this.$nextTick(function () {
26
          window.scroll(0, 0) // 页面置顶，不要再下面的定时器里面使用，有顿挫感
27
          this.isRouterAlive = true // 通过v-if展示当前页面
28
        })
29
        setTimeout(() => {
30
          this.queryList() // 异步获取数据，跟我的项目组件有关，你们可以直接在上面获取就OK
31
        })
32
      }
33
    },
34
    beforeRouteLeave(to, from, next) {
35
      // 判断如果不是进详情页，展示为true 是页面重新加载的意思
36
      from.meta.isRefresh = to.name !== 'table-detail'
37
      next() // 不添加路由不会跳转
38
    },
39
  }
40
</script>

1
activated() {
2
 if (this.$route.meta.isRefresh) {
3
    const data = this.$options.data()
4
    delete data.column
5

6
    Object.assign(this.$data, data)
7
    this.isRouterAlive = false
8
    this.$nextTick(function () {
9
      window.scroll(0, 0)
10
      this.isRouterAlive = true
11
    })
12
    setTimeout(() => {
13
      this.queryList()
14
    })
15
  } else if (this.$route.meta.isRefresh === false) {
16
    // this.$route.meta.isRefresh 在路由里面我并没有设置，默认是undefined，当他为false的时候，说明他从别的页面进来了，这个时候让他请求下数据
17
    this.queryList()
18
  }
19
}
20

21
beforeRouteEnter(to, from, next) {
22
 // 这个路由守卫函数式最先执行的
23
 to.meta.isRefresh = from.name && from.name !== 'table-detail';
24
  next()
25
},
26
// 下面代码注释即可
27
// beforeRouteLeave(to, from, next) {
28
//   from.meta.isRefresh = to.name !== 'table-detail';
29
//   next()
30
// }

1
<keep-alive
2
  :include="includes"
3
  :exclude=""
4
  :max="3">
5
  <router-view></router-view>
6
</keep-alive>
7

8
<script>
9
  // 获取vuex的数据
10
  import { mapGetters } from 'vuex'
11
  export default {
12
    computed: {
13
      // 在computed中动态监控
14
      ...mapGetters(['includes']),
15
    },
16
    methods: {
17
      changeStore() {
18
        // 改变vue的数据，在这用不到
19
        this.$store.commit('change', 'tableLists')
20
      },
21
    },
22
  }
23
</script>

1
const keepalive = {
2
  state: {
3
    includes: ['tableLists'],
4
  },
5
  mutations: {
6
    change(state, payload) {
7
      state.includes = payload
8
    },
9
  },
10
  getters: {
11
    includes(state) {
12
      return state.includes
13
    },
14
  },
15
}
16

17
export default keepalive

1
activated() {
2
  this.queryList()
3
},
4
beforeRouteEnter(to, from, next) {
5
  // 这个时候还有没this,所以这里用this的话是不能操作vuex,我是在main.js里面赋值给了window
6
  window._store.commit('change', ['tableLists']);
7
  next()
8
  // 也可以这么用
9
  // next((el) => {
10
  //  el.$store.commit('change', ['tableLists']);
11
  // })
12
},
13
beforeRouteLeave(to, from, next) {
14
  if (to.name !== 'table-detail') {
15
    // 如果不是跳转到详情页面，就穿个空数组，这里不能用 '' 默认是所有的都缓存
16
    this.$store.commit('change', []);
17
  }
18
  next()
19
}

1
scrollBehavior(to, from, savedPosition) {
2
  if (savedPosition) {
3
    return new Promise((resolve) => {
4
      setTimeout(() => {
5
        resolve(savedPosition)
6
      }, 20)
7
    })
8
  } else {
9
    // 这里是需要缓存的页面的route的name，不是vue类的name
10
    const ary = ['Invest', 'Store'];
11

12
    if (ary.includes(from.name)) {
13
      /* 最近一次回顾的时候 发现了一个问题
14
       * 如果是列表页跳转到详情页，这个时候时候其实已经到了详情页面，
15
       * 如果当当前详情页的页面的高度没有列表页面跳转进来时滚动的高度高的时候
16
       * 这个时候就会获取不真正的页面高度，然后合成事件回退的时候就会滚动不到跳转前的位置
17
       * 解决的办法就是在每个页面离开前，获取到页面的高度，存到的meta上
18
       * 这样既能解决这个问题，也能结局把不是body滚动的情况获取不到滚动高度的问题。
19
       */
20
      from.meta.scrollTop = document.documentElement.scrollTop;
21
    }
22
    return {x: 0, y: to.meta.scrollTop || 0}
23
  }
24
}