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 实现页面缓存和不缓存的方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
Vue退出登录时清空缓存的实现
如下所示: <template> <div id="main" class="app-main"> <router-view></router-view> </div> </template> <script> export default { data () { return { theme: this.$store.state.app.themeColor }; }, mount
-
vue项目强制清除页面缓存的例子
异常描述: 支付宝中内嵌h5项目(vue框架开发),前端重新打包上传之后访问页面会导致页面空白.页面tab点击异常之类异常情况,需要手动清除支付宝缓存才可以正常访问. 解决方案: 在HTTP协议中,只有后端返回 expires 或 Cache-Control:max-age=XXX, 前端才缓存. 但在浏览器中,默认会对 html css js 等静态文件.以及重定向进行缓存,如果在HEAD头中指定: <HEAD> <METAHTTP-EQUIV="Pragma"CO
-
关于Vue实现组件信息的缓存问题
当我们在开发vue的项目过程中,避免不了在路由切换到其他component再返回后该组件数据会重新加载,处理这种情况我们就需要用到keep-alive来缓存vue的组件信息,使其不再重新加载. 在app.vue里 <keep-alive> <router-view></router-view> </keep-alive> 但是这种情况会对所有的组件进行缓存,不能达到单个组件缓存的效果. 那么我们给部分组件加上,实现方法如下: 在app.vue里 <!-
-
vue实现提示保存后退出的方法
假设有这样一个需求,用户在一个页面内编辑文字,但是并未点击保存并且跳转到了下一个路由.比较好的做法应该是给出一个提示-"您编辑的内容还未保存,是否确认退出?"用户如果点击"确定",那么不保存当前内容直接退出,用户如果点击"取消",则取消本次路由跳转,继续留在原来的页面. 尝试的错误做法 一开始的时候我是想着使用vuex结合vue router的beforeEach导航守卫来实现.代码如下: 首先在vuex中新增一个状态值-introduceSta
-
vue项目中实现缓存的最佳方案详解
需求 在开发vue的项目中有遇到了这样一个需求:一个视频列表页面,展示视频名称和是否收藏,点击进去某一项观看,可以收藏或者取消收藏,返回的时候需要记住列表页面的页码等状态,同时这条视频的收藏状态也需要更新, 但是从其他页面进来视频列表页面的时候不缓存这个页面,也就是进入的时候是视频列表页面的第一页 一句话总结一下: pageAList->pageADetail->pageAList, 缓存pageAList, 同时该视频的收藏状态如果发生变化需要更新, 其他页面->pageAList,
-
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页面是
-
vue2.0 实现页面导航提示引导的方法
用户在进行一些新的操作流程时,提供一些导航流程也是必要的.项目中采用的是iview 的对话框进行实现的. demo: <Modal v-if="modalOFF === 1"> <p>这里是对话框一</p> <button @click="modalOFF = 2"></button> </Modal> <Modal v-if="modalOFF === 2">
-
vue2.0组件之间传值、通信的多种方式(干货)
Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.这次我们就来聊一聊vue2.0组件之间传值.通信的多种方式. 一.通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件.钩子函数等) this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B ②在B组件中获取A组件传递过来的参数 this.
-
页面的缓存与不缓存设置及html页面中meta的作用
HTML的HTTP协议头信息中控制着页面在几个地方的缓存信息,包括浏览器端,中间缓存服务器端(如:squid等),Web服务器端.本文讨论头信息 中带缓存控制信息的HTML页面(JSP/Servlet生成好出来的也是HTML页面)在中间缓存服务器中的缓存情况. HTTP协议中关于缓存的信息头关键字包括Cache-Control(HTTP1.1),Pragma(HTTP1.0),last-Modified,Expires等. HTTP1.0中通过Pragma 控制页面缓存,可以设置:Pragma或
-
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
使用vue-router构建单页应用时,如何给当前页面的标签页添加样式呢? 1.在app.vue文件中你的nav中添加路由地址 2.依然在app.vue文件中,添加样式 不用在任何位置加class,只要在css中写上这个名称,样式自己随意改. 如何在单页切换的时候添加过渡? 1.在app.vue文件中,将router-view包裹在transition中,transition加个name. 2.在app.vue中添加css样式(你的transition的name是什么,第一个单词就是什么) 以上
-
vue2.0路由切换后页面滚动位置不变BUG的解决方法
最近项目中遇到这样一个问题,vue切换路由,页面到顶端的滚动距离仍会保持不变. <a href="javascript:;" rel="external nofollow" class="btn btn01" @click="useRightNow">立即试用</a> <router-link class="db" to="/user">个人中心<
-
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
demo需求分析: 图中菜单区域为header公用组件,点击相应的菜单选项跳转到对应的路由,在菜单下区域加载相应组件的内容. 以下两图分别为点击"我的电站"."个人中心"的效果 demo结构介绍: 登录成功后,跳转到index页面,并默认显示index/UserStation(我的电站),index为一个组件,其他各个子菜单为一个组件,公共header为一个组件. 路由配置代码: header组件关键代码: 基于Element-ui(只需要留意红框部分):Eleme
-
vue服务端渲染页面缓存和组件缓存的实例详解
vue缓存分为页面缓存.组建缓存.接口缓存,这里我主要说到了页面缓存和组建缓存 页面缓存: 在server.js中设置 const LRU = require('lru-cache') const microCache = LRU({ max: 100, // 最大缓存的数目 maxAge: 1000 // 重要提示:条目在 1 秒后过期. }) const isCacheable = req => { //判断是否需要页面缓存 if (req.url && req.url ===
-
Android 8.0的缓存大小和缓存清理接口方法
获取缓存大小接口 主要这里的方法已经和7.0不兼容了. import android.app.usage.UsageStats; import android.app.usage.UsageStatsManager; import android.content.Context; import android.content.pm.PackageManager; import android.os.Process; import android.os.storage.StorageManager
-
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
vue2.0在使用的过程中, .vue文件之间的跳转,在template中的常见写法是: <router-link to="/miniCard/statement/horizon"> <button class="btn btn-default colorDe">继续</button> </router-link> 但是有时的需求是页面不直接跳转,有确认弹框或者其他事件,此时就需要在js中设置跳转,常用的一种方法是 .
随机推荐
- seajs中模块的解析规则详解和模块使用总结
- linux Shell学习笔记第一天
- Access使用宏控制程序--1.5.一个宏的实例——检验口令
- javaweb如何实现请求和响应
- Kotlin 基础教程之泛型
- java 求解二维数组列最小值
- VB.NET设置屏幕分辨率、颜色位数、刷新率 实例代码
- ASP.NET中操作SQL数据库(连接字符串的配置及获取)
- JS解决IOS中拍照图片预览旋转90度BUG的问题
- 第四节--构造函数和析构函数
- php中ob函数缓冲机制深入理解
- Js遍历键值对形式对象或Map形式的方法
- c#学习之30分钟学会XAML
- Android RecyclerView添加头部和底部的方法
- Docker 教程之Docker Hub详细介绍
- 图文详解Java环境变量配置方法
- MYSQL速度慢的问题 记录数据库语句
- javascript常用方法总结
- Java利用反射自动封装成实体对象的方法
- Java获取代码中方法参数名信息的方法