vue-router中scrollBehavior的巧妙用法

摘要： 問題:使用keep-alive標籤後部分安卓機返回快取頁位置不精確問題 解決方案: <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive&...

問題:使用keep-alive標籤後部分安卓機返回快取頁位置不精確問題

解決方案:

<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
const router = new Router({
 scrollBehavior(to, from, savedPosition) {
if (savedPosition && to.meta.keepAlive) {
return savedPosition;
}
return { x: 0, y:0 };
 },
});

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力

群內有大量PDF可供自取，更有乾貨實戰專案視訊進群免費領取。

2. 頁面返回出現空白屏問題

問題

【前提】：iOS裝置

【步驟】: 頁面A是個列表很長-->滑到頁尾的時候點選跳轉之後到頁面B--->再返回A頁面

--->螢幕會出現空白遮罩層--->手指輕觸螢幕滑動--->遮罩層消失

解決方案一

在介面請求成功後的回撥操作完成後進行該操作,例如

// fetchCourseList是一個封裝好的Promise請求
fetchCourseList().then(({ data: courses }) => {
 this.courses = courses;
}).then(() => {
setTimeout(() => {
window.scrollTo(0, 1);
window.scrollTo(0, 0);
});
});

該方案的弊端: 每個頁面都需要做這樣的處理，不推薦使用。

解決方案二(推薦)

使用scrollBehavior中的非同步滾動操作

const router = new Router({
 scrollBehavior(to, from, savedPosition) {
// keep-alive 返回快取頁面後記錄瀏覽位置
if (savedPosition && to.meta.keepAlive) {
return savedPosition;
}
// 非同步滾動操作
return new Promise((resolve) => {
setTimeout(() => {
resolve({ x: 0, y: 1 });
}, 0);
});
 },
});

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力

群內有大量PDF可供自取，更有乾貨實戰專案視訊進群免費領取。

該方案直接在路由進行處理，相容每個頁面並且頁面載入完後並也不會產生1px的滾動位置。