zoukankan      html  css  js  c++  java
  • vue页面缓存

    一.页面缓存介绍

    页面缓存对于用户来说,是一个比较常用的需求;

    1.项目打开在tab的页面有时需要缓存,例如,用户打开了一个页面,停留在该页面的某一步骤或操作,用户没有关闭此页面的情况下,又打开了另一个页面查看数据,然后用户想切换到刚才那个打开的页面继续操作,此时,那个页面不应该刷新,而是缓存下来,只有当用户关闭了页面,重新打开时,页面才会刷新;

    2.项目打开在tab的页面有时候不需要缓存,例如,用户打开一个页面,看完数据之后,没有关闭此页面的情况下,又打开了一个页面操作数据,操作完之后,又切回到前一个页面来查看最新的数据,此时则要重新刷新页面,不能缓存页面;

    可以参考github项目:https://github.com/Little-Orange7/cmms-vue

    该项目设计就结合了上述两种情况,就页面打开时是否缓存,可以由用户定制化,由用户自由设置。

    二.具体实现

    1.使用keep-alive来实现:

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

    include中包含的页面的name则会被缓存下来,注意:此name是指的是页面属性的name,而不是路由对象中的name属性,所以页面的name属性一定要写,并且名称要和菜单页面的一致,因为设计时读取的name是存放在数据库中的,根据菜单url的组件名称来截取的。

    2.使用vuex

    使用vuex来缓存对应的include组件名称,根据此缓存来动态调整缓存页面;

    [SET_KEEPALIVE] (state, compNames) {
      state.keepAliveComps = compNames
    }

    3.监听

    在tab中监听打开的tab对象,打开和关闭时,根据是否需要缓存的标志,来动态的调整缓存的状态数据:

    watch: {
      // 监听打开的tabs,来动态跳转缓存页面
      tabsList (newVal, oldVal) {
        let vals = newVal
        this.mediList = []// 每次都要重置为空
        vals.forEach(val => {
          if (val.keepAlive) { // 打开的tab且设置为缓存页的才会缓存
            this.mediList.push(val.name)// 放入打开的tab的name
          }
        })
        this.$store.commit('SET_KEEPALIVE', this.mediList)
      }
    }

    以上就是keepAlive缓存知识,有疑问的可以下方留言哦!

  • 相关阅读:
    一天进步一点点
    Flask
    Sqlalchemy 设置表编码及引擎
    threading.local
    xshell配置密码公钥登录
    linux 系统优化+定时任务
    linux命令
    xshell连接及优化
    linux前奏
    Vue Devtools--vue调式工具
  • 原文地址:https://www.cnblogs.com/littleorange7/p/12864528.html
Copyright © 2011-2022 走看看