vue中keep-alive实现前进刷新后退不刷新

Posted 2022-11-02 ---godzilla---

利用keep-alive标签实现前进刷新后退不刷新

需求:路由前进式能够刷新数据, 返回时页面保存之前的操作.

>修改App.vue中router-view, 根据路由中meta字段设置的变量判断是否被展示

<template>
  <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>
</template>

>在router/index.js中添加meta字段

     path: ‘/PointsList‘,
     name: ‘PointsList‘,
     component: () => import(‘@/views/PointsList‘),
     meta: 
          keepAlive: true, // 判断该组件是否需要缓存
          isBack: false // 判断是不是返回操作
     

>在对应的组件中

手动刷新之后没有了缓存数据, 这时返回也需要重新加载页面获取数据, 这里在data中定义变量判断

   data() 
     return 
       isFirstEnter:false // 定义变量来判断是否第一次进入，默认false
     ;
   

created中把isFirstEnter变为true，说明是第一次进入或刷新了页面

created() 
     this.isFirstEnter=true;
     // 只有第一次进入或者刷新页面后才会执行此钩子函数
     // 使用keep-alive后（2+次）进入不会再执行此钩子函数
 

beforeRouteEnter中判断是从哪个页面过来的

beforeRouteEnter(to, from, next) 
    if (from.name == "page") 
      // 这个name是下一级页面的路由name
      to.meta.isBack = true; // 设置为true说明你是返回到这个页面，而不是通过跳转从其他页面进入到这个页面
    
    next();
  

activated中执行获取数据的方法

因为这个页面需要缓存。只有第一次进入时才会执行created和mounted方法，再次进入就不执行了。而activated每次进入都执行，所以在这个钩子函数中获取数据

   activated() 
     if(!this.$route.meta.isBack || this.isFirstEnter)
         // 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
         // 如果isFirstEnter是true，表明是第一次进入此页面或用户刷新了页面，需获取新数据
         this.str=‘‘// 把数据清空，可以稍微避免让用户看到之前缓存的数据
         this.getData();
     
     // 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
     this.$route.meta.isBack=false
     // 恢复成默认的false，避免isBack一直是true，导致每次都获取新数据
     this.isFirstEnter=false;