首页 > 其他 > 详细

vue中如何缓存一些页面

时间:2019-11-15 11:39:10      阅读:222      评论:0      收藏:0      [点我收藏+]

在vue中,有时候我们只想缓存页面中的一些组件或页面,这个时候怎么办呢,我们就需要用判断来加载keep-alive。
例如:

// router.js
        {
          path: "/driving_licence",
          component: () => DrivingLicence,
          meta: {
            isShowFooter: true,
            title: "驾照查分"
          }
        },
        {
          name: "ticket",
          path: "/ticket",
          component: () => Ticket,
          meta: {
            isShowFooter: true,
            title: "全国罚单查询",
            isKeep: true  // 用来记录当前页面是否要使用keep-alive
          }
        }
// app.vue
<template>
  <div id="app">
    <!-- 页面中使用两个router-view,其中一个使用keep-alive包裹,在给每个加上v-if属性即可 -->
    <keep-alive>
      <router-view v-if="$route.meta.isKeep"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.isKeep"></router-view>
  </div>
</template>

当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。我们就可以在不同的钩子函数内执行相关操作。

vue中如何缓存一些页面

原文:https://www.cnblogs.com/georgeleoo/p/11864866.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!