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
});

2.app.vue部分

<template>
    <div>
        <keep-alive :include="$store.state.keepAlive">
            <router-view><