在頁面底部的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) 
  }

如此一來，便能回到使用者之前瀏覽到的地方，提升使用者體驗了。