精华内容
下载资源
问答
  • 使用keep-alive属性包裹需要缓存页面使用v-if判断,为true的是需要缓存的,false是不需要缓存的 第三步 在需要缓存页面设置导航钩子,在A野区离开时将值设置为false保证离开当前野区不被偷 第四步 在其他野区...
  • 主要介绍了Vue keepAlive 数据缓存工具,实现返回上一个页面浏览的位置,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 比如有一个列表页面,然后列表每项都有一个详情,之前用vue1.x的时候,页面缓存基本没有什么问题。 在vue2.0中出现了列表页面是每次都重新加载数据,但是详情页面却只在第一次加载的时候调用数据,如果返回到列表...
  • Vue实现前端页面缓存

    千次阅读 2020-04-15 10:32:08
    在使用Vue开发单页面应用时,我们通常会使用Vue-Router进行页面导航,Vue-Router在进行路由切换的时候,页面是会重新加载,对应的生命周期函数也会再次执行一遍,但是在有些业务场景下, 比如: 在有分页数据列表中...

    一、使用情景

    在使用Vue开发单页面应用时,我们通常会使用Vue-Router进行页面导航,Vue-Router在进行路由切换的时候,页面是会重新加载,对应的生命周期函数也会再次执行一遍,但是在有些业务场景下,
    比如:

    • 在有分页数据列表中,切换到第三页需要查看列表对应数据的详情页面,然后返回,如果不加任何处理,列表页面会重新加载,默认显示第一页数据,而不在是之前的第三页,这样如果还需要查看之前查看数据的下一条时,还需要切换到第三页,如此反复。
    • 在列表页面进行条件筛选查询,查询到对应的数据后查询详情,跳转详情页面,然后在返回,列表默认会清空查询条件,显示所有数据。

    以上两种情景都会带来很不好的用户体验。此时,就需要对列表页面进行路由缓存。在Vue-Router中可以使用keep-alive进行路由页面缓存。

    二、keep-alive基本认识

    • Vue中提供了一个内置组件keep-alive,使用<keep-alive>元素将动态组件包裹起来,内部组件就会被缓存起来。
    • <keep-alive>包裹的组件,加载过的页面,再次进入时,是不会执行页面第一次进入时的部分生命周期函数。
    • <keep-alive>包裹的组件会新增两个生命周期函数activateddeactivated.
    • 两个属性includeexclude可以让<keep-alive>实现有条件的进行缓存。include包含的组件会被进行缓存,exclude包含的组件不会被缓存。

    三、keep-alive实现路由页面缓存

    通过keep-alive实现路由页面缓存有两种如下两种方式:

    (一)、使用include控制需要缓存的页面

    // home.vue
    <template>
     <div>
       ...
      <keep-alive :include='cashViews'>
        <router-view></router-view>
      </keep-alive>
     </div>
    </template>  
    <script>
      export default{
        data() {
          return {
            // 要缓存的组件
            cashViews: ['list']
          }
        }
      }
    </script>    
    

     

    // list.vue
    <script>
      export default{
        // 在组件内路由守卫钩子函数中处理逻辑
        beforeRouteEnter (to, from, next) {
          if (from.name === 'Index') { // 处理页面缓存后,返回首页再次进入缓存页时数据为更新
            // 该生命周期无法获取到this,因此把vm实例当作参数传递
            next(vm => {
              vm.pages.pageNum = 1
              // 因为我这里查询表单是动态的,所以首页进入时需要调用一次,在改方法中请求返回后调用了获取列表数据getTableDatas方法
              vm.getQueryList()
            })
          } else if (!from.name) { // 处理刷新页面时,获取动态表单方法未执行,导致表单无法加载
            next(vm => {
              vm.getQueryList()
            })
          } else {
            // 详情返回时只更新列表数据,因为如果在详情页面做了操作,列表数据状态会改变,其他使用缓存
            next(vm => {
              vm.getTableDatas()
            })
          }
        }
      }
    </script>
    

    以上实现,是针对我自己项目业务场景的实现,如果查询表单不是动态获取的,是页面写死的,可以在activated钩子中调用查询列表数据方法。这样每次进入的缓存页面的时候,只会更新列表数据,不会改变其他缓存。

    问题:同样会存在,列表缓存数据后,返回首页,再次进入列表页面,缓存数据还在,这样可以在路由守卫beforeRouterLeave钩子中处理。

      activated() {
       this.getTableDatas()
      },
      beforeRouterLeave(to, from, next) {
      if (from.name === 'Index') {
        // 如果从首页进入时调用重置方法
        this.reset()
      }
    }
    
    • 两点注意:

      • 要缓存的路由组件必须设置name属性,跟cashViews中的值对应;
      • 如果要缓存的组件比较多时,可以使用vuex管理cashViews

    (二)、根据v-if控制显示的router-view

    1. 在路由表routes中配置meta属性,新增keepAlive属性,需要缓存的页面设置keepAlivetrue.
    {
      path: '/list',
      name: 'List',
      component: List,
      meta: {
        keepAlive: true
      }
    }
    
    1. 根据当前访问路由的keepAlive值控制是否缓存组件
    // home.vue
    <template>
      ...
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </template>
    
    1. 在组件的守卫钩子中修改keepAlive的值,控制页面缓存与否
    // List.vue
    export default {
      /* 从List组件离开时,修改keepAlive值为false,保证进入该页面时页面刷新
      */
      beforeRouteLeave(to, from, next) {
        from.meta.keepAlive = false
        next()
      }
    }
    

     

    // Detail.vue
    export default {
      /*从Detail返回List时,修改List的keepAlive为true,确保返回List页面时使用缓存不刷新页面
      */
      beforeRouteLeave(to, from, next){
        if(to.name === 'List') {
          to.meta.keepAlive = true
        }
        next()
      }
    }

     

    展开全文
  • a页面点击新建列表按钮进入到新建的页面b,填写b页面并点击b页面确认添加按钮,把这些数据带到a页面,填充到列表(数组),可以添加多条, 点击这条的时候进入到编辑页面,确认修改之后,回退到a页面,a页面需要更新...
  • 在路由文件router.js中针对要缓存页面进行设置 添加keepAlive: true,通过此字段判断是否需要缓存当前组件 { path: '/club', name: 'Club', component: Club, meta: { title: 'Club', keepAlive: true } ...

    实现缓存

    1. 在路由文件router.js中针对要缓存的页面进行设置
      添加keepAlive: true,通过此字段判断是否需要缓存当前组件
    {
            path: '/club',
            name: 'Club',
            component: Club,
            meta: {
                title: 'Club',
                keepAlive: true
            }
        },
    
    1. 在app.vue文件中添加 :
      <keep-alive>
                <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    

    $route.meta.keepAlive表示在1中配置缓存的页面进行缓存

    实现缓存页面局部的数据更改

    这样基本的功能已经实现了,但是还是不能满足我们的需求
    这样的界面缓存是对全部数据的缓存,相当于再次跳转这个界面是不进行任何钩子函数的操作,但是我们的需求是,这个界面中的部分数据要动态更新,返回这个页面时本页面数据缓存且还是页面之前的滚动位置

    使用

    在club界面(就是使用缓存的界面,添加这样的钩子函数,实现对当前界面的更新)

    activated(){
            this.active = 1
            this.num = 1
        },
    

    解析:

    官网解释:<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。 当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中,activated 和 deactivated 将会在 <keep-alive> 树内的所有嵌套组件中触发。 主要用于保留组件状态或避免重新渲染

    场景

    如果未使用keep-alive组件,则在页面回退时仍然会重新渲染页面,触发created钩子。

    在以下场景中使用keep-alive组件会显著提高用户体验,菜单存在多级关系,多见于列表页+详情页的场景如:

    1. 商品列表页点击商品跳转到商品详情,返回后仍显示原有信息
    2. 订单列表跳转到订单详情,返回,等等场景。

    keep-alive的生命周期

    1. 初次进入时:created > mounted > activated;退出后触发 deactivated
    2. 再次进入:会触发 activated;事件挂载的方法等,只执行一次的放在 mounted 中;组件每次进去执行的方法放在 activated 中

    所以通过官网提供的钩子函数activated,我们可以对已缓存的界面进行动态的局部的更新操作

    展开全文
  • 保存数据:localStorage.setItem(key,value); 读取数据:localStorage.getItem(key); 删除单个数据:localStorage.removeItem(key); 删除所有数据:localStorage.clear(); 得到某个索引的key:localStorage.key...

    这里写图片描述
    change事件的用法和目的,见下面方法定义
    这里写图片描述
    保存数据:localStorage.setItem(key,value);
    读取数据:localStorage.getItem(key);
    删除单个数据:localStorage.removeItem(key);
    删除所有数据:localStorage.clear();
    得到某个索引的key:localStorage.key(index);

    注意localStorage的语法,及参数的含义。
    键/值对通常以字符串存储,存储时通常用JSON.stringify( )转换成json字符串格式
    读取数据或操作数据时,按索引值获取数据。用JSON.parse( )转换成json对象格式才能操作

    展开全文
  • 主要介绍了vue Tab切换以及缓存页面处理的几种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了解决vue页面 回退页面 keeplive 缓存问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • A页面进入B页面,应该根据不同的列表item显示不一样的详情,从B进入C,也应该根据item的标识比如ID展示不一样的内容,在C页面操作后,返回B页面,B页面数据发生变化。这个时候会有两种情况: C页面操作数据后返回B...
  • 主要介绍了详解vue-router数据加载与缓存使用总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue 页面保留缓存和清除缓存

    千次阅读 2020-06-24 10:57:36
    路由: routes:[{ path:'/page1', name:page1', component:page1', meta:{ keepAlive:true//true是保存缓存,false是不保存 } },{ path:'/page2', name:page2', component:...

    路由:

     routes: [{

            path: '/page1',

            name: page1',

            component: page1',

            meta:{

                        keepAlive:true  //true是保存缓存,false是不保存

                      }

     

    },{

    path: '/page2',

            name: page2',

            component: page2',

             meta:{

                        keepAlive:true

                      }

     

    }]

    页面js:

      /**

       * 判断是否要清除缓存,beforeRouteLeave与methods等平级

       */

        beforeRouteLeave(to, from, next) {   //参数(马上去的页面,现在的页面,跳转)

        if(判断条件){

             to.meta.keepAlive = false  //将要去的那个页面的缓存清空

        }else{

           to.meta.keepAlive = true   //将要去的那个页面的缓存保留

        }

        next();

      },

    展开全文
  • 页面跳转数据缓存功能是专门为应对这种情况开发出来的功能,能够在尽量少做配置的情况下,实现无感知的数据存储和回显。 实现方式 首先需要定义页面的结构,如下图: 路由结构如下: router.js { path:...
  • Vue页面缓存解决方案feb-alive (上) 在剖析feb-alive实现之前,希望大家对以下基本知识有一定的了解。 keep-alive实现原理 history api vue渲染原理 vue虚拟dom原理 feb-alive与keep-alive差异性 1. 针对...
  • Vue中如何缓存页面

    2021-08-31 16:21:58
    Vue中经常会遇到需要缓存页面的情况,如果不对Vue进行处理,那么Vue默认是不会缓存页面的。例如从菜谱列表界面进入到菜谱的详情页后,再从菜谱详情页中返回到菜谱列表页面中时,菜谱列表是不需要进行刷新的,一个...
  • vue 页面缓存数据

    2020-04-08 10:10:59
    1.当前页面 beforeRouteLeave(to, from, next){ if(to.name === ‘Mileage’) { to.meta.keepAlive = true } next() }, 2.index.js { path: ‘/railway’, name:‘Railway’, component: () => import(’…/...
  • h5部分页面不需要数据缓存 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router); const myComponents = { Login: r => require.ensure([], () => r(require("@/vie...
  • 页面缓存解决方案 keep-alive 1. //*.vue <template> <router-link to:"/" /> <router-link to:"/about" /> //固定写法 <router-view v-slot={Component}> <keep-alive :includes=...
  • 到现在,接触vue也小段时间了,项目进行到了一定程度,然而项目缺少了缓存机制,所以每次跳转页面都会重新created一下数据,虽说系统的数据请求速度很快,但是这样做对系统的性能会有很大的坏处的,所以到这里就要对...
  • 要想使数据刷新不丢失,就得监听页面刷新事件,在刷新前将数据缓存到本地存储,页面刷新后再将数据从本地存储恢复。目前较普遍的做法是类似这样: //App.vue的created(): created() { //在页面加载从本地读取状态...
  • 主要给大家介绍了关于Vue项目全局配置页面缓存之实现按需读取缓存的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起看看吧
  • 实现场景:在页面中我们要实现每个页面自己能控制是否缓存,即是否每次进入页面是否需要刷新页面,每个页面有不同的需求,并且在全局有一个按钮能在每个当前页面按这个按钮都可以刷新。 一、页面缓存 找到页面的...
  • vue页面缓存

    2020-06-18 16:46:23
    需要加缓存页面(一般为列表页) beforeRouteLeave (to, from, next) { // ... if (to.name === '详情页名字') { //去往详情页时需要缓存 let obj = JSON.parse(JSON.stringify(this.$data)) obj['$name'] = ...
  • vue部分页面设置缓存

    2021-03-21 18:09:50
    在一个页面跳转到另一个页面时,再回来时,页面数据不变。 例如 点击所在位置,跳转到选择位置页面的时候,回来时,保持跳转前输入的数据不清空。 这就需要用到路由缓存。 首先在路由中配置 { path: '/...
  • //设置keepalive标识是否缓存页面 //列表页设置为true { path: '/order/orderlist', name: 'orderlist', component: () => import('@/views/order/orderlist.vue'), meta: { title: '订单列表
  • /* 页面数据缓存 */ var _CACHE_OBJS = {}; function _init_cache(comp, key, cache) { var obj = cache[key]; if (obj !== undefined) { comp[key] = obj; } var deep = typeof comp[key] === 'object'; comp...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,019
精华内容 12,407
关键字:

vue页面数据缓存

vue 订阅