【vue使用keep-alive引起的页面错乱】vue 使用keep-alive出现页面错乱问题

需求：产品要求页面A跳转页面B,然后返回页面A,返回时页面要滚动到上次离开的位置

1.听到这个需求首先想到的是利用vue路由中的滚动行为，但是这个功能使用是有条件限制的。vue 路由滚动行为 只能适用于路由模式是history模式，项目使用的是hash模式，所只能想其他办法了。
2.然后想到的是利用keep-alive缓存

1. 首先再你的路由表中设置keepAlive字段，你所需要缓存的页面
   

2. 然后再router-view使用keep-alive组件
   
   注意这个key，这个key属性有大的作用，很关键

3. 然后使用beforeRouteLeave路由导航守卫，将离开时的scrollTop值记录起来，缓存的组件，页面B返回页面A，页面A的生命周期不会触发created这个钩子函数的，但是这个activated钩子函数会触发，所以如果要数据请求的话，写在activated这个钩子函数中

 beforeRouteLeave(to, from, next) {
      // 离开组件时保存滚动位置
      // 注意, 此时需调用路由守卫`beforeRouterLeave`而非生命周期钩子`deactivated`
      // 因为, 此时利用`deactivated`获取的 DOM 信息已经是新页面得了
      this.scrollTop = document.documentElement.scrollTop;
      next();
  },
  activated() {
    this.getList()
  },

完成以上就可以解决，页面A跳转到页面B,然后返回页面A，页面滚动到离开时的位置。
说明一下页面A,页面B,页面C都是页面D的children路由，并且都使用了缓存。
随意多点了页面跳转，bug突然就来了。

先点击页面C,然后再点击页面A,再点击页面B,本来是显示页面B的但是却显示页面C,这时出现了页面错乱。出现这个问题，首先想到的就是缓存引起的bug，然后去路由表把KeepAlive字段设置false，果然就不会出现页面错乱。

遇到问题不会怎么办？那当然是百度问度娘啦！果然不止我一个人遇到这个问题看到这篇博客按照这篇博客方法试一试，把父级路由的路由加载方式有懒加载变成常规加载。
一开始我在router-view 没有加key的属性的，结果就是没作用，还是会出现页面错乱。

突然间灵光闪现出这个router-view这个key属性，试一试果然有用！
router-view这个key用什么作用呢？自行百度一波，兄嘚。简单来说就是vue会复用相同的组件，加了key组件强制不复用。。