keep-alive缓存页面刷新

vue文件keep-alive缓存页面刷新

概述：vue开发项目时，需要缓存多个页面的情况
使用场景：例如：现有4个页面，页面1，页面2，页面3，页面4
要求：1、从1-2-3-4依次跳转时，每次都刷新页面，不进行缓存；
2、从4-3-2-1依次返回时，页面不刷新，依次取缓存页面；
　总结：外到内都需要刷新，内到外皆获取缓存页面；
实现方式：keep-alive、vuex、路由钩子函数beforeRouteEnter、beforeRouteLeave
1、vuex部分：

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

let storeModules = {};

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        keepAlive: []
    },
    getters: {},
    mutations: {
        change_keepalive: (state, keepAlive) => {
            state.keepAlive = keepAlive;
        }
    },
    actions: {},
    modules: storeModules
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

部分

<template>
    <div>
        <keep-alive :include="$">
            <router-view></router-view>
        </keep-alive>
    </div>
</template>

<script>
export default {};
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

使用<keep-alive>的include属性，来实现动态的组件缓存。

先说一下include属性，它的值可以是：字符串，正则表达式，数组

首先我们需要知道keep-alive可以根据include中的值来匹配当前路由对应组件的name属性，来判断这个路由中的组件是否需要缓存。

3.页面1内部写法

methods: {
     // 跳转
     goLink(){
         this.$store.commit('change_keepalive', ['页面1','页面2','页面3']) 
         this.$router.push({
             path:'/页面2',
         })
     }
 },
 beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.$store.commit('change_keepalive', ['页面1'])
    })
  }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

4.页面2内部写法

beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.path.indexOf('页面3') > -1) {
          vm.$store.commit('change_keepalive', ['页面1','页面2'])
      }
    })
  },
  beforeRouteLeave (to, from, next) {
    if (to.path.indexOf('页面3') > -1) {
      this.$store.commit('change_keepalive', ['页面1','页面2', '页面3'])
    } else if (to.path.indexOf('页面1')>-1) {
      this.$store.commit('change_keepalive', ['页面1'])　
    }
    next()
  }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

5.页面3内部写法

beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.path.indexOf('页面4') > -1) {
          vm.$store.commit('change_keepalive', ['页面1','页面2', '页面3'])
      }
    })
  },
  beforeRouteLeave (to, from, next) {
    if (to.path.indexOf('页面4') > -1) {
      this.$store.commit('change_keepalive', ['页面1','页面2', '页面3'])
    } else if (to.path.indexOf('页面2') > -1) {
      this.$store.commit('change_keepalive', ['页面1','页面2'])　
    }
    next()
  }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

6.页面4
不需要缓存则无需添加任何东西，正常书写即可，如需添加设置缓存，则按照上方更改添加配置即可。

注：

其中('页面x')中页面x为router的path属性

this.$('change_keepalive', ['页面1','页面2'])中的页面x为组件的name属性（不是路由的name，是组件的name）

<script>
    export default {
        name:'index',//组件name
        components: {},
        props: {},
        data() {
            return {};
        },
        computed: {},
        watch: {},
        created() {},
        mounted() {},
        methods: {}
    }
</script>```

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16