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

听上去很棒呀，用用看~

   
    {{nav.name}}
  


  
    
  
	

 使用后，通过面包屑导航返回时，数据就不会消失啦啦啦~

总结

文档真的是要多看，作者把所有的精髓都描绘在文档中了。我们前期看文档可能是学习如何使用，当你有一些实践经验后，再回过头来看，别有一番风味~冲呀

嘘寒问暖 不如打笔巨款~

后记

嗨~各位朋友，我又回来啦。哈哈哈~我真的又回到原点了，使用了vuex来管理数据。然后然后，我把keep-alive也去掉啦~接下来说下原因哈，单页应用，最大的痛点就是页面刷新。刷新页面，数据丢失很严重，但是普通的用户呢，遇到问题只能刷新看看咯（话说怎么会遇到问题~哼哼）

真实的情况就是这样，在添加的页面刷新页面后，无法定位左侧的Tree，让页面回退到上一级，但是页面会重新渲染。一级页面比二级页面更先被渲染了，此时子路由的页面还没created，无法监听初始化时传递过来的节点信息。So~~又去试了一下在$nextTick()中emit也是gg...