Vue2.0 实现页面缓存和不缓存的方式
1、在app中设置需要缓存的div
<keep-alive>//缓存的页面 <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>//不缓存的页面
2、在路由router.js中设置.vue页面是否需要缓存
{ path: '/home', component: home, meta: { keepAlive: true },//当前的.vue文件需要缓存 }, { path: '/notice', component: notice,//当前页面不需要缓存 }
3、从缓存页面跳转到不缓存页面,或者从不缓存页面跳转到缓存页面的时候,会发现watch是不能监听路由的,是因为缓存和不缓存页面分别在不同的div里面,一个div里面是不可能监听到另一个div的路由的,所有需要把监听的路由都加上缓存(在路由添加 meta: { keepAlive: true }),路由在缓存页面之间进行跳转的时候,就可以通过监听路由来进行判断数据是否需要更新。
vue keep-alive 缓存后, 进入缓存页需要再次更新
beforeRouteEnter (to, from, next) { next (vm => { vm.getData() }) }, mounted: function () { this.getData() }
keep-alive 数据更新问题
在项目中使用<keep-alive>包含<router-view>实现页面缓存,加速页面加载,
同时,这种方式带来一些弊端,请看如下大神解释:
****************************************************************************
当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。
当再次进入(前进或者后退)时,只触发activated。
****************************************************************************
这就带来一个问题,之前在项目中使用mounted在页面加载时获取数据,使用<keep-alive>后方法不再生效,
根据上面的解释,将mounted替换为activated即可。
以上这篇Vue2.0 实现页面缓存和不缓存的方式就是小编分享给大家的全部内容了,希望能给大家一个参考
您可能感兴趣的文章:
- 使用Apollo Client设置缓存交互方式,实现进入页面自动刷新
- JavaScript面向对象 实现页面元素的设计 使用面向对象的方式
- js实现页面跳转的几种方式
- 关于友盟统计Viewpager+Fragment实现方式页面统计
- Js实现页面跳转的几种方式
- ASP.NET MVC中使用OutputCache实现服务器端页面级缓存注意问题
- vue2.0页面前进刷新回退不刷新的实现方法
- js实现页面跳转的几种方式
- 用CashFilter实现页面级缓存实践[ OSCache使用]
- 关于不同页面之间实现参数传递的几种方式讨论
- vue2.0中better-scroll插件使用---实现页面滚动
- 【HTML】【JS】JS实现页面跳转方式汇总
- javascript跳转页面:Javascript实现页面跳转的几种方式收藏
- Javascript实现页面跳转的几种方式分享
- 页面兼容ie8样式几种实现方式
- Nginx+Tomcat实现反向代理、页面缓存、动静分离
- 百度2017年暑假实习生编程题目(第二题)----2、页面调度 在计算机中,页式虚拟存储器实现的一个难点是设计页面调度(置换)算法。其中一种实现方式是FIFO算法。
- HTML页面实现全方位页面缓存
- Web页面间传值的实现方式总结
- window.showModalDialog方式/模式窗口数据不刷新(缓存)问题/模式窗口中,链接弹出新窗口问题/无提示关闭页面的方法