美文网首页
vue中如何缓存一些页面

vue中如何缓存一些页面

作者: 江海大初学者 | 来源:发表于2019-11-15 10:26 被阅读0次

在vue中,有时我们想让一些组件keep-alive,还有一些不用keep-alive,这个时候怎么办呢,我们就需要用判断来加载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中如何缓存一些页面

    在vue中,有时我们想让一些组件keep-alive,还有一些不用keep-alive,这个时候怎么办呢,我们就需...

  • Vue2.0路由是否缓存的方法

    1、在app中设置需要缓存的div 2、在路由router.js中设置.vue页面是否需要缓存 3、从缓存页面跳转...

  • vue.js填坑之旅:页面缓存

    有时候我们需要对一些页面进行缓存,以便返回的时候不会因为少传一些值而引起内容错乱。 vue.js中对页面进行缓存的...

  • vue keep-alive

    vue使用中经常需要缓存当前页面,比如当从商品页跳转到支付页,需要缓存当前页面在vue使用中,我用到的方法有两种1...

  • vue中keep-alive 前进后退时页面数据缓存和刷新问题

    vue中keep-alive 前进后退时页面数据缓存和刷新问题 keep-alive用法: 1、在app.vue中...

  • keep-alive使用场景

    Vue中keep-alive的深入理解与使用(配合router-view缓存整个路由页面)在搭建 vue 项目时,...

  • vue页面缓存

    前言:在一个系统的各个页面间切换如果没设置缓存页面会导致重复请求数据,从而页面不够流畅导致用户体验感变差。 实现 ...

  • page cache页面缓存

    为什么设计缓存? 如何设计缓存? 页面缓存都缓存什么?

  • vue中在指定页面跳转时缓存页面

    vue的缓存页面是使用keep-alive实现,那如果要实现在某些指定页面之间切换才缓存页面要怎么实现呢? 比如现...

  • Vue2开发WebApp滚动条不缓存的问题

    在用Vue2开发webapp的过程中,为了体验更加友好,使用了keep-alive来做页面缓存,当页面跳转时...

网友评论

      本文标题:vue中如何缓存一些页面

      本文链接:https://www.haomeiwen.com/subject/uvudictx.html