這篇文章主要為大家展示了“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)位置”這篇文章吧。

成都創(chuàng)新互聯(lián)主營(yíng)泰州網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都APP應(yīng)用開發(fā),泰州h5微信小程序開發(fā)搭建,泰州網(wǎng)站營(yíng)銷推廣歡迎泰州等地區(qū)企業(yè)咨詢

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

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

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

    // 緩存組件跳轉(zhuǎn)的頁(yè)面
    
   

 // 非緩存組件跳轉(zhuǎn)頁(yè)面
 

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)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前標(biāo)題：vue中如何實(shí)現(xiàn)進(jìn)入詳情頁(yè)記住滾動(dòng)位置-創(chuàng)新互聯(lián)
標(biāo)題來(lái)源：http://weahome.cn/article/cddisd.html