vue中如何實(shí)現(xiàn)進(jìn)入詳情頁(yè)記住滾動(dòng)位置

這篇文章主要為大家展示了“vue中如何實(shí)現(xiàn)進(jìn)入詳情頁(yè)記住滾動(dòng)位置”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue中如何實(shí)現(xiàn)進(jìn)入詳情頁(yè)記住滾動(dòng)位置”這篇文章吧。

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

{ 
path: ‘/scrollDemo', 
name: ‘scrollDemo', 
meta: { 
keepAlive: true // 需要緩存 
}, 
component: resolve => { require([‘../view/scrollDemo.vue'], resolve) } 
}

2.在App.vue中設(shè)置緩存組件

  <keep-alive>  // 緩存組件跳轉(zhuǎn)的頁(yè)面
    <router-view v-if="$route.meta.keepAlive" class="ui-view" transition-mode="out-in"></router-view>
  </keep-alive> 

 // 非緩存組件跳轉(zhuǎn)頁(yè)面
 <router-view v-if="!$route.meta.keepAlive" class="ui-view" transition-mode="out-in"></router-view>

3.在頁(yè)面注冊(cè)對(duì)應(yīng)的事件

1. 在return中定義一個(gè)初始值 scroll

2. 在mouted中 ，mouted中的方法代表dom已經(jīng)加載完畢

window.addEventListener('scroll', this.handleScroll);

3.methods 用于存放頁(yè)面函數(shù)

   handleScroll () {
    this.scroll = document.documentElement && document.documentElement.scrollTop

    console.log(this.scroll)
   }

4. activated 為keep-alive加載時(shí)調(diào)用

   activated() {
     if(this.scroll > 0){
      window.scrollTo(0, this.scroll);
      this.scroll = 0;
      window.addEventListener('scroll', this.handleScroll);
     }
  }

5.deactivated 頁(yè)面退出時(shí)關(guān)閉事件 防止其他頁(yè)面出現(xiàn)問(wèn)題

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

以上是“vue中如何實(shí)現(xiàn)進(jìn)入詳情頁(yè)記住滾動(dòng)位置”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！