vue keep-alive

//父页面
<keep-alive>
    <router-view v-if="$route.meta&&$route.meta.keepalive"></router-view>
</keep-alive>
    <router-view v-if="!($route.meta&&$route.meta.keepalive)"></router-view>

  

//router
router 添加meta属性和标识符
{
       path:'list',
       component: () => import('./views/staff/total_list.vue'),
       meta:{
                      keepalive:true
                  }
 }

  

//组件记录滚动条位置

//mounted 挂载时添加滚动事件
  this.container=document.getElementById('container');
  this.container.addEventListener('scroll', this.handleScroll);

//methods
handleScroll(){
this.scroll  =  this.container.scrollTop;
}

//activated 激活时赋值滚动条位置

 activated() {
            this.container=document.getElementById('container');
            if (this.scroll > 0) {
                this.container.scrollTo(0, this.scroll);
                this.scroll = 0;
               this.container.addEventListener('scroll', this.handleScroll);
            }
        }
//deactivated 非激活状态时 解绑滚动事件
  deactivated(){
            this.container.removeEventListener('scroll', this.handleScroll);
        }

  

posted @ 2019-04-25 10:12  *朝晖  阅读(356)  评论(0编辑  收藏  举报