随着项目不断变大,页面变多,搜索条件也随之也越来越多,而每次跳转页面再返回时,之前的筛选的条件都会别清空。之前在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. Spring Boot使用阿里云证书启用HTTPS

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

  2. MongoDB数据库的基本操作命令

    启动服务 net start mongodb 使用 登录本机mongodb Mongodb服务启动之后,打开命令行工具. 登录 mongo 127.0.0.1:27017 27017是mongodb的 ...

  3. 使用JS生成HTML标签,以达到母板页的效果

    前台页面 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1. ...

  4. js 函数定义的方式

    js 函数定义的方式 一.总结 一句话总结: 最常见就下面三种 最常见:function func1([参数]){/*函数体*/} 将匿名函数赋值给变量:var func2=function([参数] ...

  5. What exactly is the parameter e (event) and why pass it to JavaScript functions?

    What exactly is the parameter e (event) and why pass it to JavaScript functions? 问题 Well, when I lea ...

  6. 【转】C++友元

    转自:https://www.cnblogs.com/BeyondAnyTime/archive/2012/06/04/2535305.html 1.友元函数的简单介绍 1.1为什么要使用友元函数 在 ...

  7. 浏览器端-W3School-HTML:HTML DOM Meta 对象

    ylbtech-浏览器端-W3School-HTML:HTML DOM Meta 对象 1.返回顶部 1. HTML DOM Meta 对象 Meta 对象 Meta 对象代表 HTML 的 一个 & ...

  8. flutter 屏幕宽高 状态栏高度

    MediaQuery.of(context) 包含了一些屏幕的属性: size : 一个包含宽度和高度的对象,单位是dp print(MediaQuery.of(context).size); //输 ...

  9. New Date API介绍

    一.新的Date API介绍 LocalDateLocalTimeInstantDurationPeriod formatterparsejdk以前的java.util.Date存在的问题 1)比如n ...

  10. 阶段3 3.SpringMVC·_01.SpringMVC概述及入门案例_03.入门程序之需求分析