vue中進入詳情頁記住滾動位置的方法(keep-alive)
更新時間：2018年09月21日 11:12:04 作者：徹夜不歸
今天小編就為大家分享一篇vue中進入詳情頁記住滾動位置的方法(keep-alive)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
> 有時業(yè)務提出這樣一個需求 就是從商品頁面進入到列表詳情頁 要保存當前滾動的位置，這里我就想到了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 用于存放頁面函數(shù)
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 頁面退出時關閉事件 防止其他頁面出現(xiàn)問題
deactivated(){
window.removeEventListener('scroll', this.handleScroll);
}
以上這篇vue中進入詳情頁記住滾動位置的方法(keep-alive)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue3.x使用swiperUI動態(tài)加載圖片失敗的解決方法
這篇文章主要為大家詳細介紹了vue3.x使用swiperUI動態(tài)加載圖片失敗的解決方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了vue后臺管理添加多語言功能的實現(xiàn)示例，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-04-04
下面小編就為大家分享一篇淺談vue.js導入css庫(elementUi)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
element-ui table行點擊獲取行索引（index）并利用索引更換行順序
這篇文章主要介紹了element-ui table行點擊獲取行索引（index）并利用索引更換行順序，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
這篇文章主要介紹了vue axios登錄請求攔截器，判斷是否登錄超時，或對請求結果做一個統(tǒng)一處理的教程詳解,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue中引入路徑@的用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue?select組件綁定的值為數(shù)字類型遇到的問題
這篇文章主要介紹了vue?select組件綁定的值為數(shù)字類型遇到的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
大家在寫系統(tǒng)的時候,會有這樣的需求：點擊修改后把需要修改的數(shù)據(jù)放入表單,其中會有下拉單選框、下拉多選框,展示下拉框單選框內的數(shù)據(jù)只需要將所選id賦值給下拉框綁定的值就可以了,下面給大家分享vue elementUI下拉框值無法選中問題,感興趣的朋友一起看看吧2024-03-03
這篇文章主要介紹了Vue-router中path的設置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要介紹了Vue中強制組件重新渲染的正確方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01