美文网首页
vue A、B、C三个页面keepAlive、include页

vue A、B、C三个页面keepAlive、include页

作者: 一个记事本 | 来源:发表于2021-02-02 15:26 被阅读0次

    背景:
    1、A列表页面 --- 跳转到 --- B填写页面 (B页面不要缓存)。
    2、A列表页面 --- 跳转到 --- B填写页面(填写了内容) --- 跳转到(B页面需要缓存) --- C选择单位页面再回到B页面,要显示 B页面之前填写的内容。

    用vue-router中的keepAlive设置为true是不可行的。

    // ********app.vue文件*******
    <div id="app">
         <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
          </keep-alive>
          <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
    
    // ********router.config.js文件*******
    {
      path: '/A',
      name: 'A',
      component: () =>import ('@/views/A'),
      meta: {
          title: 'A列表页面',
          keepAlive: false
      }
    },
    {
      path: '/B',
      name: 'B',
      component: () =>import ('@/views/B'),
      meta: {
          title: 'B填写页面',
          keepAlive: true   //  设置B页面缓存
      }
    },
    {
      path: '/C',
      name: 'C',
      component: () =>import ('@/views/C'),
      meta: {
          title: 'C单位选择页面',
          keepAlive: false
      }
    }
    
    // 在B填写页面拦截路由跳转,动态修改B填写页面的缓存
    beforeRouteLeave(to, from, next) {
        if (to.name === 'C') {
           from.meta.keepAlive = true // 跳转C单位选择页面,设置B填写页面(本页面)缓存
        }else{
          from.meta.keepAlive = false // 跳转A列表页面,设置B填写页面(本页面)不缓存
        }
        next()
      },
    
    

    注:::::以上这种方式是不行的。

    可行方案:
    结合keep-alive的include属性和vuex进行缓存。


    image.png
    首先安装vuex
    安装后新建store.js
    // ********store.js文件*******
    import Vue from "vue"
    import Vuex from "vuex"
    Vue.use(Vuex)
    export default new Vuex.Store({
        state: {
            keepAlive: []
        },
        mutations: {
            setKeepAlive: (state, keepAlive) => {
                state.keepAlive = keepAlive
            }
        },
        getters: {
            keepAlive: state => state.keepAlive
        }
    })
    
    //在main.js里面引入store.js
    // ********main.js文件*******
    import store from './store'
    new Vue({
        router,
        store,
        render: h => h(App)
    }).$mount('#app')
    
    // ********app.vue文件*******
    <div id="app">
         <keep-alive :include="keepAlive">
           <router-view></router-view>
         </keep-alive>
    </div>
    <script>
    export default {
      name: 'MainView',
      computed: {
        keepAlive() {
          return this.$store.getters.keepAlive
        }
      }
    }
    </script>
    
    // ********A列表页面.vue文件*******
    // 在A列表页面点击进入 B填写页面时
    this.$store.commit('setKeepAlive', ['B']) // 设置B填写页面缓存
    this.$router.push('/B')  // 跳转B填写页面
    
    // ********B填写页面.vue文件*******
    // B填写页面的跳转路由拦截方法
    beforeRouteLeave (to, from, next) {
       if (to.name === 'C') {  //  如果跳转是C单位选择页面,那就把当前B填写页面缓存起来。
        this.$store.commit('setKeepAlive', ['B'])
      } else {
        this.$store.commit('setKeepAlive', []) // 跳转其它页面则清除缓存
      }
      next()
     }
    

    这种方式不依赖于vue-router中的keepAlive值,那怕设置为false,也可以通过上面的方式进行页面缓存。
    这样就OK了!!!

    相关文章

      网友评论

          本文标题:vue A、B、C三个页面keepAlive、include页

          本文链接:https://www.haomeiwen.com/subject/ufjytltx.html