在页面底部的MainTabBar组件中一共四个tag：Home、Cart、Category和Profile，对应路由表中的四个配置。当用户从Home切换到其它tag后，我们希望能保存下此时Home的状态，如滚动位置、高亮商品类别等。这样当用户再次回到Home页面时，看到的还是离开时的样子。

事实上，无论是哪个路由，我们都希望它们可以实现上面所说的功能。所以我们需要在页面显示占位符router-view标签的外面套一层keep-alive标签。这样，当路由切换时，原来的组件便不会被destoryed，而是会deactivated。我们可以在离开时保存页面滚动高度为Y，再回到页面时，立即滚动到Y的位置。这就需要使用activated和deactivated这两个导航守卫方法了。

页面滚动高度就是scroll组件中的scroll对象的y属性：

    getScrollY(){
      return this.scroll ? this.scroll.y : 0
    }

在父组件中调用getScrollY：

  deactivated(){
    this.saveY = this.$refs.scroll.getScrollY()
  }

自动滚动通过scroll对象的scrollTo方法来实现，前两个参数为x、y方向的滚动距离，第三个参数为滚动消耗的时间：

    scrollTo(x, y, delay = 300) {
      this.scroll && this.scroll.scrollTo(x, y, delay);
    }

在父组件中调用scrollTo：

  activated(){
    this.$refs.scroll.refresh()
    this.$refs.scroll.scrollTo(0, this.saveY) 
  }

如此一来，便能回到用户之前浏览到的地方，提升用户体验了。

保存页面状态的功能实现