一个插件让你的Vue项目像原生App一样缓存页面
时间:2023-03-28 19:50:26
HTML
一个插件可以让你的Vue项目像原生App一样缓存页面B页面和B页面都使用了C组件。如果要缓存A页面,不缓存B页面,就不好用keep-alive组件了。如果只需要安装一个插件,不需要任何繁琐的代码,就可以实现页面级缓存,并且可以根据路由历史判断是否缓存当前页面,让你的项目像原生一样流畅应用程序。你想试一试吗?DEMO(建议在设备模拟下查看)在线预览history-keep-alivehistory-transitiondemo工程地址是多少?一个像原生app一样根据路由历史缓存页面的vue插件。基于vue的缓存机制,开发者可以根据自己的需要扩展自己的功能。实现复杂的自定义缓存功能为什么像原生app一样缓存页面平滑过渡效果简单易用,插件keep-alive插件轻量级插件,引入后体积仅20k且可嵌套,兼容多级路由使用提供的底层组件,可以根据不同的需求进行定制。1.安装代码地址npmihistory-keep-alive-S或者yarnaddhistory-keep-alive2.使用基础index.js(项目入口文件)importVuefrom"vue";importrouterfrom"./router";//vue-router实例importHistoryKeepAlivefrom"history-keep-alive";Vue.use(HistoryKeepAlive,{router});//启动你的应用程序...index.vue(任何使用的页面)
/template>3.options参数说明类型默认值router必须传,vue-routerinstanceVueRouter当VueRouter没有immediaterouter.onReady时是否记录路由历史(非必要不可修改)BooleantrueuseTimestamp是否使用时间戳判断前进后退。启用后,推送和替换操作会将时间戳参数添加到页面地址。如果禁用,则不判断当前路由动作。使用Transition组件时,建议开启Booleantrue组件的前缀Prefixhistory-keep-alive组件注册,比如传入值'base',使用时为String'history'defaultTransitionName默认的转场效果Transition组件的ofoftheTransitionisString'slide'4.使用Transition组件提供像原生应用一样平滑的过渡效果";Vue.use(HistoryKeepAlive,{router});//Startyourapp...index.vue
history-keep-alive/Transitioncomponentpropspropsdescriptiontype默认值aliveRef设置的ref属性,见keepScrollStringnokeepAlive是否缓存页面Booleanfalsemax缓存页数上限Number10keyFormatter自定义keep-alivekeypro处理器,详情见keyFormatterFunction()=>{}historyFilter自定义keep-alive历史过滤器,详见historyFilterFunctionnull5.高级使用销毁页面缓存$routerHistoryInstance.destroy//通过路径销毁对应的页面缓存//使用缓存时请避免销毁当前页面,以免造成页面渲染问题destroyByPath(){constres=this.$routerHistoryInstance.destroy({path:'/home/list'});//如果res为真,则销毁成功,否则销毁失败},$routerHistoryInstance.destroyAll//销毁所有页面缓存//destroyAll方法不会销毁当前页面的缓存destroyAll(){this.$routerHistoryInstance.destroyAll();}注:销毁页面缓存的demo见下面链接keepScroll函数,必须为滚动元素设置这个idindex.vue(父页面)
index.vue(子页面,例如:route-name:keep-scroll)...
route.js(配置子页面路由)exportdefault[......{path:"/keep-scroll",name:"keep-scroll",component:KeepScroll,meta:{keepScroll:true,//设置keepScroll参数},},];注意:body滚动的页面不能使用,请实现routes元参数参数描述类型默认值aliveKey嵌套使用
,如果要在不同页面复用同一个父组件,需要设置唯一值String否nocache是否禁用缓存Boolean否transitionName设置页面的过渡效果,可选值[slide,zoom,fade,fade-transform]String否keepScroll启用页面保持滚动功能Boolean否demo更多功能参数,可以在使用keyFormatter和keyFormatter自定义组件缓存时设置key,具有相同key的组件会共享缓存,适用于个别页面或者需要对缓存进行特殊处理的组件。historyFilter