当前位置： 移动技术网 > IT编程>网页制作>CSS > Vue2.0缓存介绍

Vue2.0缓存介绍

2018年04月03日  | 移动技术网IT编程  | 我要评论

最近在做一个手机端的网站，遇到页面的缓存问题，自己由于经验不足，走了弯路。由于有些页面需要缓存，有些页面不需要。所以用全局缓存是不行的，必须要使用单页面的缓存。

单页面缓存

本案列适用于跳转到下一页然后回到当前页时需要显示第一次进入本页的信息。

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>

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网