問題:使用keep-alive標(biāo)簽后部分安卓機(jī)返回緩存頁位置不精確問題
解決方案:
<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 }; },});2. 頁面返回出現(xiàn)空白屏問題
問題
【前提】：iOS設(shè)備
【步驟】: 頁面A是個(gè)列表很長-->滑到頁腳的時(shí)候點(diǎn)擊跳轉(zhuǎn)之后到頁面B--->再返回A頁面
--->屏幕會(huì)出現(xiàn)空白遮罩層--->手指輕觸屏幕滑動(dòng)--->遮罩層消失
解決方案一
在接口請(qǐng)求成功后的回調(diào)操作完成后進(jìn)行該操作,例如
// fetchCourseList是一個(gè)封裝好的Promise請(qǐng)求fetchCourseList().then(({ data: courses }) => { this.courses = courses;}).then(() => { setTimeout(() => { window.scrollTo(0, 1); window.scrollTo(0, 0); });});該方案的弊端: 每個(gè)頁面都需要做這樣的處理，不推薦使用。
解決方案二(推薦)
使用scrollBehavior中的異步滾動(dòng)操作
const router = new Router({ scrollBehavior(to, from, savedPosition) { // keep-alive 返回緩存頁面后記錄瀏覽位置 if (savedPosition && to.meta.keepAlive) { return savedPosition; } // 異步滾動(dòng)操作 return new Promise((resolve) => { setTimeout(() => { resolve({ x: 0, y: 1 }); }, 0); }); },});該方案直接在路由進(jìn)行處理，兼容每個(gè)頁面并且頁面加載完后并也不會(huì)產(chǎn)生1px的滾動(dòng)位置。
總結(jié)
以上所述是小編給大家介紹的vue-router中scrollBehavior的巧妙用法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
