Vue: keep-alive在项目中的应用
前言
上图看看项目基本情况。
再次用文字简单地描述一下,左侧是公司的组织架构图。选择部门,在右侧展示对应的部门名称以及部门的子部门和成员数据。左侧是固定的,右侧的内容包含两部分,面包屑导航和子路由(初始时是默认路由/companyStructure/structureIndex)。由于每个页面都需要面包屑导航,就把它写在路由外,统一管理。
在面包屑导航中,点击对应的导航可以回到相应的页面。 点击添加子部门或者添加成员时,会对应地切换子路由。
在路由中配置了面包屑导航,还需要在main.js中在路由跳转前,获取面包屑导航的值。
开始
以上就是项目的基本流程, 那现在这么做,有什么问题呢?
项目中使用的是,iView,左侧的公司架构图,使用的就是Tree组件,默认选中的是公司名称。所以在mounted时(默认的值),和Tree的值改变时(用户自己选中),使用hub emit一个事件,将当前选中的部门信息传递给默认的子路由。子路由相应数据的变化。
点击添加按钮,来到添加页面时,没有问题
但是,当我们想通过面包屑导航回到公司架构页面时,子路由原先的公司架构的数据都没有了,因为父组件的mounted的Tree change事件没有触发,当时子路由被重新mounted了。
走到这里,可能会想,那就使用vuex来管理呀~mounted和change时set,在子路由的mounted中computed。但是为什么一开始就没有使用vuex呢?一是因为两者关系较近,一级路由与嵌套路由;二是因为数据的改变依赖于事件,要是我们在同一页面,直接绑定一个事件就OK了,那些在我们是否能这样实现呢?可以,使用eventHub。
实践
山重水复疑无路,柳暗花明又一村。是不是又要回过头去改用vuex呢?突然灵光一现,想到前几天在文档中瞄过的keep-alive。
先看看文档怎么说:https://cn.vuejs.org/v2/api/#keep-alive
听上去很棒呀,用用看~
[code]<Breadcrumb class="navs"> <BreadcrumbItem v-for="(nav, index) in currentNavs" :key="index" :to="nav.path"> {{nav.name}} </BreadcrumbItem> </Breadcrumb> <div class="router-wrapper"> <keep-alive> <router-view /> </keep-alive> </div>
使用后,通过面包屑导航返回时,数据就不会消失啦啦啦~
总结
文档真的是要多看,作者把所有的精髓都描绘在文档中了。我们前期看文档可能是学习如何使用,当你有一些实践经验后,再回过头来看,别有一番风味~冲呀
欢迎大家一起谈论技术,一起成长,感谢~或者扫描下方二维码,与我取得联系~ (记得备注:CSND喔~)
后记
嗨~各位朋友,我又回来啦。哈哈哈~我真的又回到原点了,使用了vuex来管理数据。然后然后,我把keep-alive也去掉啦~接下来说下原因哈,单页应用,最大的痛点就是页面刷新。刷新页面,数据丢失很严重,但是普通的用户呢,遇到问题只能刷新看看咯(话说怎么会遇到问题~哼哼)
真实的情况就是这样,在添加的页面刷新页面后,无法定位左侧的Tree,让页面回退到上一级,但是页面会重新渲染。一级页面比二级页面更先被渲染了,此时子路由的页面还没created,无法监听初始化时传递过来的节点信息。So~~又去试了一下在$nextTick()中emit也是gg...
阅读更多- vue项目优化之通过keep-alive数据缓存的方法
- vue项目优化之通过keep-alive数据缓存(vue+webpack)
- 浅析Vue项目中使用keep-Alive步骤
- vue单页 使用keep-alive页面返回不刷新
- Vue作为组件在前端项目中的应用&Vue.set 的用法
- vue-router 之 keep-alive
- vue2.0 keep-alive最佳实践
- 为什么基于TCP的应用需要心跳包(TCP keep-alive原理分析)
- vue keep-alive 标签的实践方案
- 关于在Vue项目中,运用electron打包成web桌面应用的心得浅见
- vue keep-alive生命周期
- HTML5 Canvas圆盘抽奖应用(适用于Vue项目)
- 详解Vue路由开启keep-alive时的注意点
- vue中 keep-alive 的使用
- Vue路由开启keep-alive时的注意点
- 详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
- vue2.0 keep-alive最佳实践
- vue 使某个组件不被 keep-alive 缓存的方法
- Vue之keep-alive
- vue 如何使某个组件不被 keep-alive 缓存