前言
上图看看项目基本情况。
再次用文字简单地描述一下，左侧是公司的组织架构图。选择部门，在右侧展示对应的部门名称以及部门的子部门和成员数据。左侧是固定的，右侧的内容包含两部分，面包屑导航和子路由（初始时是默认路由/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
听上去很棒呀，用用看~
<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...