Vue Router 动态设置路由 keep-alive

keep-alive 根据 "路由名称" 缓存，对应页面组件的 name 属性必须和 include 数组中一样

场景：ABC三个页面，A-B，B不需要缓存，B-C，B需要缓存

App.vue

<template>
    <div id="app">
        <template>
            <!-- 需要缓存的路由 -->
            <keep-alive :include="cacheViews">
                <router-view :key="$route.fullPath"></router-view>
            </keep-alive>
        </template>
    </div>
</template>
<script>
    export default {
        name:'App',
        data(){
            return {
                cacheViews: this.$store.state.cacheViews
            }
        },
        watch: {
            $route: {
                deep: true,
                handler(to, from){
                    this.cacheViews = this.$store.state.cacheViews;
                }
            }
        }
    }
</script>

简单的 store 模式

let store = {
    debug: true,
    state: {
        cacheViews: ['B']
    },
    setCacheViewsAction(newValue){
        if (this.debug) console.log('setCacheViewsAction triggered with', newValue);
        if(this.state.cacheViews.length !== 0){
            let flag = this.state.cacheViews.some(item => {
                return item === newValue;
            })
            if(!flag){
                this.state.cacheViews.push(newValue);
            }
        }else{
            this.state.cacheViews.push(newValue);
        }
    },
    clearCacheViewsAction(newValue){
        if (this.debug) console.log('clearCacheViewsAction triggered');
        if(this.state.cacheViews.length !== 0){
            for(let i = 0; i < this.state.cacheViews.length; i++){
                if(this.state.cacheViews[i] === newValue){
                    this.state.cacheViews.splice(i, 1);
                    break;
                }
            }
        }
    }
}
export default store

main.js

/* 
    引入-----简单的 store 模式
 */
import store from './store/index.js';
Vue.prototype.$store = store;

A页面中

beforeRouteLeave(to, from, next) {
    if(to.name === 'B'){
        this.$store.setCacheViewsAction('B');
    }
    next();
}

B页面中

`组件内的守卫，与 created，mounted 等同级`
beforeRouteLeave(to, from, next) {
    if(to.name === 'C'){
        this.$store.setCacheViewsAction('B');
    }else{
        this.$store.clearCacheViewsAction('B');
    }
    next();
}


`如果返回 B 页面，重新执行某个方法`
beforeRouteEnter(to, from, next) {
    next((vm) => {
        // 如果是从 C 来的就重新获取数据
        if (from.name == 'C') {
            vm.changeServerState();
        }
    })
}