随着项目不断变大,页面变多,搜索条件也随之也越来越多,而每次跳转页面再返回时,之前的筛选的条件都会别清空。之前在elment-ui table组件 -- 远程筛选排序提到过缓存,但是有所取巧,这次重新用另一种方式进行实现,或者说是更加合理一些。

场景需求

如何使页面跳转后回来时输入框中输入的值依旧存在?

初步设想

  • 利用keep-alive来缓存组件
  • 利用vuex来实时更新缓存组件的情况及缓存页面的各类筛选条件
  • 利用vue-router来进行预判页面是否需要缓存,从而实时更改缓存组件情况

代码之旅开启

  • keep-alive提供了几个属性,需要缓存组件名(因而需要缓存的组件都有自己的名称,全局唯一)

    • include
    • exclude
    • max

    当前主要使用include来动态更新

  • vue-router
    • 需要在有需要缓存的页面,在路由meta属性添加一个字段来进行标识(首次进入)
    • beforeRouteLeave来进行预判当前页面是否需要缓存
  • vuex
    • 缓存筛选条件(有需要在返回页面时回显的数据)
    • 动态缓存组件

路由

  • 通过路由名跟组件名进行绑定,取名一致(建立隐形关系)
export default [{
path: '/keep',
name: 'Keep', // 既是组件名又是路由名
component: () => import('@/views/keep-alive/index.vue'),
meta: {
alive: true // 通过alive来确定初步是否缓存
}
}]

vuex

  • 初始化需要缓存的组件

App.vue

<keep-alive :include="cachedViews">
<router-view></router-view>
</keep-alive>

初始化

 mounted () {
this.setInitActiveViews()
}
// 获取需要缓存的组件
getInitActiveViews (routes) {
let views = []
routes.forEach(route => {
if (route.meta && route.meta.alive) {
views.push(route.name)
}
if (route.children) {
const childViews = this.getInitActiveViews(route.children)
if (childViews.length) {
views = [...views, ...childViews]
}
}
})
return views
},
// 存入vuex中
setInitActiveViews () {
const alives = this.getInitActiveViews(this.$router.options.routes)
alives.forEach(item => {
this.$store.commit('cache/addCacheViews', item)
})
}

至此便初步缓存组件了

  • 缓存条件

动态增删缓存组件

在需要缓存的组件进行处理

具体的某个组件

created () {
if (!this.$store.state.cache.cachedViews.includes(this.$options.name)) {}// 数据请求
this.$store.commit('cache/addCacheViews', this.$options.name)
},
activated () {
// 数据请求
},
beforeRouteLeave (to, from, next) {
const { name } = to
// 进入当前路由需要缓存条件
const childRouterMap = [
'jsonp'
]
const isCache = childRouterMap.includes(name)
if (!isCache) {
// 清空搜索条件
this.$store.commit('keep/deleteParams')
// 删除缓存
this.$store.commit('cache/deleteViews', this.$options.name)
}
next()
}

此处便可以做到,只有进入jsonp路由时,页面数据会被缓存,若是进入其他的页面,就会被清空。同时也可以及时刷新页面数据

总结

  • 使用beforeRouteLeave时,需要是在路由被注册的,也就是component: **.vue该组件方可有效
  • 由于动态缓存组件一直在改动,目前只有这样实现可以满足需求,后期若是有更好的再进行处理
  • 条件尽可以缓存起来,使用vuex最方便了
  • 页面数据既可以实时刷新又可以保留条件
  • 解决了页面数据缓存,而不是粗暴地通过 v-if来触发组件重新走一遍
  • 当前项目地址

参考

如何利用`keep-alive`按需缓存页面数据的更多相关文章

  1. vue缓存页面【二】

    keep-alive是vue内置的一个组件,可以使被它包含的组件处于保留状态,或避免被重新渲染. 用法:运行结果描述:input输入框内,路由切换输入框内部的内容不会发生改变.在keep-alive标 ...

  2. 如何利用Nginx的缓冲、缓存优化提升性能

    使用缓冲释放后端服务器 反向代理的一个问题是代理大量用户时会增加服务器进程的性能冲击影响.在大多数情况下,可以很大程度上能通过利用Nginx的缓冲和缓存功能减轻. 当代理到另一台服务器,两个不同的连接 ...

  3. 利用chrome插件批量读取浏览器页面内容并写入数据库

    试想一下,如果每天要收集100页网页数据甚至更多.如果采用人工收集会吐血,用程序去收集也就成为一个不二的选择.首先肯定会想到说用java.php.C#等高级语言,但这偏偏又有个登陆和验证码,搞到无所适 ...

  4. Tornado 结合memcached缓存页面

    原因 Blog是一个更新并不很频繁的一套系统,但是每次刷新页面都要更新数据库反而很浪费资源,添加静态页面生成是一个解决办法,同时缓存是一个更好的主意,可以结合Memcached添加少量的代码进行缓存, ...

  5. 利用Jquery的load函数实现页面的动态加载

    利用Jquery的load函数实现页面的动态加载  js的强大功能相信大家都知晓,今天通过jquery的库函数load可以更加方便的实现页面的动态刷新,经过几天的研究与探索,终于有所成效!吾心甚蔚! ...

  6. 使用Donut Caching和Donut Hole Caching在ASP.NET MVC应用中缓存页面

    Donut Caching是缓存除了部分内容以外的整个页面的最好的方式,在它出现之前,我们使用"输出缓存"来缓存整个页面. 何时使用Donut Caching 假设你有一个应用程序 ...

  7. 使用Filter防止浏览器缓存页面或请求结果

    仅仅须要两步: 1.定义一个Filter: /** * 防止浏览器缓存页面或请求结果 * @author XuJijun * */ public class NoCacheFilter impleme ...

  8. Servlet过滤器——使用过滤器禁止浏览器缓存页面

    1.概述 IE缓存虽然能提高已储存网站的访问速度,但是过度的IE缓存会影响浏览器的响应速度.同时还可能为网站的运行带来一些不必要的麻烦.例如:可能会因为浏览器缓存的应用,而导致Web服务器不能准确的计 ...

  9. 利用webBrowser获取框架内Html页面内容

    原文:利用webBrowser获取框架内Html页面内容 利用webBrowser获取页面比较简单,MSDN下有示例,在这里不必多说. 可是一些 HTML 文档由“框架”构成,或可以存放它们自己独特 ...

随机推荐

  1. 51nod-1640--天气晴朗的魔法(简单最小生成树)

    1640 天气晴朗的魔法 题目来源: 原创 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题 这样阴沉的天气持续下去,我们不免担心起他的健康. 51nod魔法学校近日 ...

  2. MySQL格式化小数点为百分号并保留2为小数

    #colname为字段名字,CONCAT的作用是把小数点转成百分号,TRUNCATE的作用是保留百分号的小数点成几位 SELECT CONCAT(TRUNCATE(colname*100,2),'%' ...

  3. maven jdbc 驱动安装

    https://mvnrepository.com/ 搜索  : com.microsoft.sqlserver 点击进入: https://mvnrepository.com/artifact/co ...

  4. 从零开始学习vue(2)

    一.vue实例 每个vue应用都是通过Vue构造函数创建的一个新的实例开始的: var vm = new Vue({ //选项对象 }) 在这其中vm(viewModel的简称)通常都表示vue实例的 ...

  5. docker容器的学习

    什么是docker   Docker 最初是 dotCloud 公司创始人 Solomon Hykes 在法国期间发起的一个公司内部项目,于 2013 年 3 月以 Apache 2.0 授权协议开源 ...

  6. Spring Boot使用阿里云证书启用HTTPS

    1.到阿里云下载证书页面下载证书 2.根据页面内容,可以使用2种证书:PFX JKS 把对应证书放到src/main/resources目录下 在application.properties文件中加入 ...

  7. JS 由前端保存到文件

    function doSave(value, type, name) { var blob; if (typeof window.Blob == "function") { blo ...

  8. @RepositoryRestResource注解的使用

    1.Build with Maven <?xml version="1.0" encoding="UTF-8"?> <project xmln ...

  9. http服务配置和apache

    CentOS 6 httpd 程序环境 记录了httpd的主进程编号:    主程序文件: /usr/sbin/httpd /usr/sbin/httpd.worker /usr/sbin/http ...

  10. 认识一下java神器Btrace

    转载: http://calvin1978.blogcn.com/articles/btrace1.html BTrace是神器,每一个需要每天解决线上问题,但完全不用BTrace的Java工程师,都 ...