vue组件keepAlive的使用

发布时间:2021-04-29 发布网站:https://www.cnblogs.com/guojikun
前端之家收集整理的这篇文章主要介绍了vue组件keepAlive的使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

需要达到的效果:

列表页------->详情页/修改------>返回列表页(缓存列表页)

其它不缓存

 

//vuex/index.js

new Vuex.store({
    state: {
        catchPages: []
    },  mutations: {
        add(state,item) {
            if (state.catchPages.indexOf(item) === -1)
            state.catchPages.push(item);
        },remove(state,item) {
            let index = state.catchPages.indexOf(item);
            if(index >0)
            state.catchPages.splice(index,1)
        }
    },actions: {
        add(state,item) {
            state.commit('add',item)
        },item) {
            state.commit('remove'return content.catchPages;
        }
    }
})

路由入口的写法:

<!--app.vue-->

<keep-alive :include="$store.getters.catchPages">
        router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive="!$route.meta.keepAlive">

在路由钩子 beforeRouteLeave 中把需要缓存的组件的name加入 vuex 中的 catchPages 数组中

beforeRouteLeave(to,from,next){
    do something
  next();
}

 

总结


以上是前端之家为你收集整理的vue组件keepAlive的使用全部内容,希望文章能够帮你解决vue组件keepAlive的使用所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。