vue 路由缓存页面(beforeRouteLeave)

app.vue 入口页面

<keep-alive :include="includedComponents">
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
import {mapGetters} from 'vuex';
computed: mapGetters(['includedComponents'])
           

路由配置：加meta

{
    path:'arrive',
    name:'到达',
    meta:{keepAlive:true}   //如果需要用keep-alive 缓存的话，必须使用name 去跳转路由
    components:''
}
           

arrive.vue需要缓存的页面：

beforeRouteLeave(to,from,next){
    if(to.name == '') //判断是加缓存还是清理掉缓存
    this.$store.dispatch('setCache',this.$options.name)  //加缓存      或者 this.$options.name = "arrive"
    this.$store.dispatch('clearCache','arrive')  //清理缓存      或者 this.$options.name = "arrive"
}
           

vuex页面截图；