Vue2.0缓存

最近在做一个手机端的网站,遇到页面的缓存问题,自己由于经验不足,走了弯路。由于有些页面需要缓存,有些页面不需要。所以用全局缓存是不行的,必须要使用单页面的缓存。
单页面缓存
本案列适用于跳转到下一页然后回到当前页时需要显示第一次进入本页的信息。
1.在index.js配置路由的文件中设置:

export default new Router(
    routes: [
        {
      //会员代理
      path:'/proxyMember',
      name:'proxyMember',
      component:ProxyMember,
      meta:{proxyMenber: true}   //添加一个meta,{}内的内容自己取,值取bull类型 true
    },
    {
      //个人报表
      path:'/personalReport',
      name:'personalReport',
      component:PersonalReport,
      meta:{keepAlive: true,isBack:false}
    },
    ]
)

2.在app.vue全局的vue文件里设置:

<template >
  <div id="app">
    <!--选择性缓存-->
      <keep-alive>   //缓存标签
      <router-view  v-if="$route.meta.keepAlive || $route.meta.alive || $route.meta.proxyMenber" ></router-view> //如果是一个页面v-if里面就写一个,多个页面需要缓存就用(或)||连接起来。
      </keep-alive>
    <router-view  v-if="!($route.meta.keepAlive) && !($route.meta.alive) && !($route.meta.proxyMenber)"></router-view> //如果是一个页面v-if里面就写一个,多个页面需要缓存就用(非)&&连接起来。

  </div>
</template>

这样你就可以缓存你需要的页面了

全局缓存
……未完待续

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值