vue-router scrollBehavior的用法

问题: 使用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 };

},

});

 

2. 页面返回出现空白屏问题

解决方案一

在接口请求成功后的回调操作完成后进行该操作,例如
// fetchCourseList是一个封装好的Promise请求
fetchCourseList().then(({ data: courses }) => {
  this.courses = courses;
}).then(() => {
    setTimeout(() => {
        window.scrollTo(0, 1);
        window.scrollTo(0, 0);
    });
});

解决方案二(推荐)

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);
    });
  },
});