vue vuex+keep-alive进阶用法(灵活缓存页面，主要是移动端)

注意：每个页面都要添加name，name:"页面名称'，不然不起作用

1、在App.vue中，编写如下代码

<template>
    <div id="app">
        <!-- include 需要缓存的组件 -->
        <keep-alive :include="includeList">
            <router-view />
        </keep-alive>

    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data(){
        return{
        }    
    },
    computed: {
        ...mapState(['includeList'])
    },
}
           

2、在store.js中

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    includeList: ['Home', 'Center', 'Cart'], //初始化缓存页面，一般来说就用tabbar底部的导航，自定义添加
  },
  mutations: {
    //插入缓存数组
    setInclude(state, data) {
      var index = state.includeList.indexOf(data);
      if (index == -1) {
        state.includeList.push(data)
      }
    },
    //删除对应缓存字段
    del_include(state, data) {
      var index = state.includeList.indexOf(data);
      if (index > -1) {
        state.includeList.splice(index, 1)
      }
    },
  },

  actions: {
  },
  modules: {
  }
})
           

3、tabbar页面使用，主要是底部导航那几个一级页面

export default {
    name:'Home',

    beforeRouteEnter(to, from, next) {
        next(vm => {
            document.querySelector('body').setAttribute('style', 'background-color:#f6f6f6');
        })
    },
    beforeRouteLeave(to, from, next) {
        if (from.name === 'Home') {
            this.$store.commit('setInclude', 'Home')
        } 
        document.querySelector('body').removeAttribute('style')
        next()
    },
    
    created(){
        //初始化一些数据
    },

    //keep-alive缓存，替代created()执行，首次不执行，之后只要缓存生效了每次都会执行。刷新时created与activated都会执行
    activated(){
        //要执行的操作
    },
    
    //卸载
    deactivated() {
        
    },
}
           

4、非tabbar页面使用

export default {
    name:'list',

    beforeRouteEnter(to, from, next) {
        next(vm => {
            document.querySelector('body').setAttribute('style', 'background-color:#f6f6f6');
        })
    },
    beforeRouteLeave(to, from, next) {
        //to.path 指要跳转的页面路径，比如从列表页跳转到详情页
        if (to.path === '/listDetail') {
			this.$store.commit('setInclude', 'list')
		} else {
			this.$store.commit('del_include', 'list')
		}
		document.querySelector('body').removeAttribute('style')
		next()
    },
    created(){
        //初始化一些数据
    },

    //keep-alive缓存，替代created()执行，首次不执行，之后只要缓存生效了每次都会执行。刷新时created与activated都会执行
    activated(){
        //要执行的操作
    },
    
    //卸载
    deactivated() {
        
    },
}
           

这样就可以了，亲测有效，如果有哪些不清楚或疑问的在下方留言！