vue-router中scrollBehavior的巧妙用法

更新时间：2018年07月09日 11:31:13 作者：卸帐篷的黑人

本文给大家介绍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. 页面返回出现空白屏问题

问题

【前提】：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);
  });
 },
});

该方案直接在路由进行处理，兼容每个页面并且页面加载完后并也不会产生1px的滚动位置。

总结

以上所述是小编给大家介绍的vue-router中scrollBehavior的巧妙用法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

Vite配置优雅的code spliiting代码分割详解
这篇文章主要为大家介绍了Vite配置优雅的code spliiting代码分割详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
使用proxytable 配置解决 vue-cli 的跨域请求问题【推荐】
这篇文章主要介绍了利用 proxytable 配置解决 vue-cli 的跨域请求问题,本文的目录结构基于 webpack 模板结构，需要的朋友可以参考下
2018-05-05
vue利用Moment插件格式化时间的实例代码
Moment.js 是一个 JavaScript 日期处理类库，用于解析、检验、操作、以及显示日期。这篇文章主要给大家介绍了关于vue利用Moment插件格式化时间的相关资料,需要的朋友可以参考下
2021-05-05
Vue中对比scoped css和css module的区别
这篇文章主要介绍了Vue中scoped css和css module的区别对比，scoped css可以直接在能跑起来的vue项目中使用而css module需要增加css-loader配置才能生效。具体内容详情大家参考下本文
2018-05-05
Vue中进行路由懒加载的示例详解
路由懒加载是一种优化Vue应用程序性能的技术，本文介绍了Vue中如何进行路由懒加载，包括使用Vue异步组件和Webpack代码分割,需要的朋友可以参考下
2023-06-06
vue中mapbox地图显示一半的问题及解决方法
在vue中创建mapbox地图，地图只显示一般，查看浏览器开发者工具，发现将canvas.mapboxgl-canvas 的position:absolute去掉就解决了，今天小编通过本文给大家分享详细过程，感兴趣的朋友跟随小编一起看看吧
2023-07-07
Vue2和Vue3如何使用watch侦听器详解
这篇文章主要介绍了在Vue2和Vue3中如何使用watch侦听器，分别对vue2及vue3作了详细的说明，有需要的朋友可以借鉴参考下，希望能够有所帮助
2021-09-09
Vue新手指南之环境搭建及入门
vue就是前端上的Java,前端上的C#,有个前端的虚拟DOM引擎,设计理念和Java/C#类似,这篇文章主要给大家介绍了关于Vue新手指南之环境搭建及入门的相关资料,需要的朋友可以参考下
2021-08-08
Vue路由与a标签链接锚点发生冲突问题及解决
这篇文章主要介绍了Vue路由与a标签链接锚点发生冲突问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
在Vue3中为路由Query参数标注类型的方法
这篇文章主要介绍了在Vue3中如何为路由Query参数标注类型,我们就针对这个话题如何为路由Query参数标注类型为例,看看Composable和IOC容器的代码风格究竟有什么不同,需要的朋友可以参考下
2024-08-08

vue-router中scrollBehavior的巧妙用法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具