Vue缓存路由

一、缓存全部路由：

<keep-alive > 
   <router-view ></router-view>
 </keep-alive> 

二、缓存指定路由：

1. include

<keep-alive :include="该路由组件name”> 
    <router-view ></router-view>
</keep-alive> 

2. 使用meta：

(1). 路由中做如下配置：

{ 
    path: '/A',
    component:resolve => require(['../components/A'], resolve)
    meta: { requiresAuth: true, title: "标题",keepAlive:true },
},

(2). 在APP.vue中：

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

三、include和meta区别：

1. 路由中使用meta只缓存第一次缓存下来的信息。
2. 如果想实现从指定路由进入当前页面才做缓存keep-alive include比较合适。例如有三个组件A,B,C(假设A,B,C即为组件名字，又是路由名字，又是组件name)，要求只有从A组件返回或者进入C组件时，才缓存C组件，代码如下：

(1). store.js中

import Vuex from 'vuex'
Vue.use(Vuex);
export default new Vuex.Store({
    state: {
        cacheRoute: ['C']
    },
    mutations: {
        'CACHEROUTE': (state, data) => {
            state.cacheRoute = data;
        },
    }
})

(2). APP.vue中

<keep-alive :include="cacheRoute" > 
    <router-view ></router-view>
</keep-alive> 

computed:{
    cacheRoute(){
        return this.$store.state.cacheRoute
    }
}

(3). C页面中：

beforeRouteEnter(to, from, next) {
   next(vm => {
    vm.$store.commit('CACHEROUTE',['C'])//C为C组件的名字
   });
},
beforeRouteLeave(to,from,next){
    if(to.path!='/A'){
        this.$store.commit('CACHEROUTE',[''])
    }
    next();
},