vue路由跳转记住滚动位置的方法(keep-alive)

1. 首先在路由中引入需要的模块

   ~~~
   { 
   path: '/scrollDemo', 
   name: 'scrollDemo', 
   meta: { 
       keepAlive: true // 需要缓存 
       }, 
       component: resolve => { require(['../view/scrollDemo.vue'], resolve) } 
   }
   ~~~
2. 在App.vue中设置缓存组件

   <keep-alive>  // 缓存组件跳转的页面
       <router-view 
           v-if="$route.meta.keepAlive" 
           class="ui-view" 
           transition-mode="out-in">
       </router-view>
   </keep-alive> 
   // 非缓存组件跳转页面
   <router-view 
       v-if="!$route.meta.keepAlive" 
       class="ui-view" 
       transition-mode="out-in">
   </router-view>
3. 在页面注册对应的事件
   1. 在return中定义一个初始值 scroll
   2. 在mouted中 ，mouted中的方法代表dom已经加载完毕

      window.addEventListener('scroll', this.handleScroll);
   3. methods 用于存放页面函数

      handleScroll () {
          this.scroll = document.documentElement && document.documentElement.scrollTop
          console.log(this.scroll)
      }
   4. activated 为keep-alive加载时调用

      activated() {
          if(this.scroll > 0){
          window.scrollTo(0, this.scroll);
          this.scroll = 0;
          window.addEventListener('scroll', this.handleScroll);
          }
      }
   5. deactivated 页面退出时关闭事件 防止其他页面出现问题

      deactivated(){
      window.removeEventListener('scroll', this.handleScroll);
      }