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 >  
<p id="app">  
  <!--选择性缓存-->    
  <keep-alive>   //缓存标签      
<router-view  v-if="$route.meta.keepAlive || $route.meta.alive || $route.meta.proxyMenber" >
</router-view>      
</keep-alive>   
 <router-view  v-if="!($route.meta.keepAlive) && !($route.meta.alive) && !($route.meta.proxyMenber)">
</router-view>
 </p>
</template>

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