zoukankan      html  css  js  c++  java
  • 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';
    
    Vue.use(Vuex);
    
    const store = new Vuex.Store({
      state: {
        keepAlive: []
      },
        mutations: {
            CHANGE_KEEPALIVE: (state, keepAlive) => {
                state.keepAlive = keepAlive
            }
        },
        // 这里getters可有可无
        getters: {
            keepAlive: state => state.keepAlive
        }
    });
    
    export default store;

    2、app.vue内部写法

    <template>
      <div id="app">
        <!-- 当使用了getters和computed进行监听时,可直接绑定keepAlive -->
        <keep-alive :include="keepAlive" >
        <!-- 也可不使用getters和computed进行监听,直接取值$store.state.keepAlive -->
        <!-- <keep-alive :include="$store.state.keepAlive" > -->
          <router-view></router-view>
        </keep-alive>
      </div>
    </template>
    
    <script>
    export default {
      name: "app",
      data() {
        return {};
      },
      // 当使用了getters时可以选择添加computed进行监听
      computed: {
        keepAlive() {
          return this.$store.getters.keepAlive;
        },
      },
    };
    </script>
    

    3、页面1内部写法

      beforeRouteEnter (to, from, next) {
        next(vm => {
          vm.$store.commit('CHANGE_KEEPALIVE', ['页面1'])
        })
      },
    // 跳转
        goLink(){
          this.$store.commit('CHANGE_KEEPALIVE', ['页面1','页面2','页面3']) 
          this.$router.push({
            path:'/页面2',
          })
        },   

    4、页面2内部写法

    beforeRouteEnter (to, from, next) {
        next(vm => {
          if (from.path.indexOf('页面3') > -1) {
              vm.$store.commit('CHANGE_KEEPALIVE', ['页面1','页面2'])
          }
        })
      },
      beforeRouteLeave (to, from, next) {
        if (to.path.indexOf('页面3') > -1) {
          this.$store.commit('CHANGE_KEEPALIVE', ['页面1','页面2', '页面3'])
        } else if (to.path.indexOf('页面1')>-1) {
          this.$store.commit('CHANGE_KEEPALIVE', ['页面1']) 
        }
        next()
      },

    5、页面3内部写法

      beforeRouteEnter (to, from, next) {
        next(vm => {
          if (from.path.indexOf('页面4') > -1) {
              vm.$store.commit('CHANGE_KEEPALIVE', ['页面1','页面2', '页面3'])
          }
        })
      },
      beforeRouteLeave (to, from, next) {
        if (to.path.indexOf('页面4') > -1) {
          this.$store.commit('CHANGE_KEEPALIVE', ['页面1','页面2', '页面3'])
        } else if (to.path.indexOf('页面2') > -1) {
          this.$store.commit('CHANGE_KEEPALIVE', ['页面1','页面2']) 
        }
        next()
      },

    6、页面4不需要缓存则无需添加任何东西,正常书写即可,如需添加设置缓存,则按照上方更改添加配置即可

  • 相关阅读:
    matlab矩阵中如何去掉重复的行;如何找到相同的行,并找到其位置
    Coursera 机器学习 第9章(下) Recommender Systems 学习笔记
    机器学习基石笔记1——在何时可以使用机器学习(1)
    Coursera 机器学习 第9章(上) Anomaly Detection 学习笔记
    matlab安装过程的被要求的配置程序
    jdk环境变量配置
    Coursera 机器学习 第8章(下) Dimensionality Reduction 学习笔记
    Coursera 机器学习 第8章(上) Unsupervised Learning 学习笔记
    Coursera 机器学习 第7章 Support Vector Machines 学习笔记
    linux服务器---squid限制
  • 原文地址:https://www.cnblogs.com/Alex-Song/p/15342255.html
Copyright © 2011-2022 走看看