伏龙阁资源网

keep-Alive搭配vue-router实现缓存页面效果的示例代码
站长资源 2024/11/25 佚名
2 0

　　Vue工程中有些页面需要有缓存。这个功能通过keep-alive组件实现，keep-alive组件可以使被包含的组件保留状态，或避免重新渲染。

　　在routes.js中定义路由，在路由中定义元信息(meta字段)，需要缓存的页面就需要在meta对象中定义一个字段，这里设置为keepAlive，设置为true，反之，则不缓存。

{
  path: '/a',
  component: () => import('@/pages/A'),
  meta: {
   title:'A',
   keepAlive: true
  }
},
{
  path: '/b',
  component: () => import('@/pages/B'),
  meta: {
   title:'B',
   keepAlive: true
  }
},
{
  path: '/c',
  component: () => import('@/pages/C'),
  meta: {
   title:'C',
   keepAlive: true
  }
}

　　然后修改App.vue页面

<template>
 <div id="app">
  <!-- <router-view v-if="isRouterAlive"></router-view> -->
  <keep-alive>
   <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
 </div>
</template>

　　这样就可以实现有目的的对页面进行缓存了。

　　但如果这时要实现从A页面进入B页面后，让A页面不缓存的话我们还需要搭配上路由钩子函数beforeRouteLeave()。

在A页面中这样写：

beforeRouteLeave(to, from, next) {
    // 设置下一个路由的 meta
    if(to.meta.title=="B"){
      from.meta.keepAlive = false; // 让B不缓存，即刷新
    }
    next();
}

　　用到keep-Alive，遇到的最多的一个问题就是怎么去掉这种缓存状态。就比如用户每一次进行新流程的操作的时候，这个时候页面还是缓存是不对的。

　　就比如，一个用户登录之后在某个缓存的页面上填了信息，如果这个用户注销了之后，按道理，这些信息是应该消失的，即恢复初始状态，但是这个时候不关闭页面标签（因为新开标签的话会使所有页面重新渲染），用户再次登录回去，还会发现之前的页面还是存在缓存的，即这个页面没有重新渲染。如果想要解决这个问题的话，就要提到activated和deactivated这两个特殊的生存周期函数了。但是需要注意的是，activated和deactivated这两个生存周期函数只存在于keep-Alive组件中。当一个keep-Alive组件缓存生效的时候，它不会触发平常我们熟悉的created()和mounted()这类生存周期函数，因此不会被重新渲染，所以，它的状态得以保留。但是我们可以通过这两个生存周期函数来更新页面。

　　先设置一个全局的标志符，类型为布尔值，代表是否为缓存状态，你可以把它存进vuex或者sessionStorage。（以下为存入sessionStorage为例）

　　在用户登录成功的时候设置为sessionStorage.setItem("keepAlive",false);然后在缓存页面中添加如下代码：

activated:function(){
    if(sessionStorage.getItem("keepAlive")=='false'){
      //进行初始化
    }else{
      //to do
    }
},

总结

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接