vue-cli中使用vue-router切换页面时自动滚动到顶部的方法

vue-cli中使用vue-router切换页面时自动滚动到顶部的方法

解决办法:

在 Vue项目的main.js文件中加入以下代码即可解决:

//页面跳转显示在顶部
router.afterEach((to,from,next) => {
   window.scrollTo(0,0);
 })

有时候这样解决出现的问题:
1.scrollTo方法部分在手机上的部分浏览器不支持,也就是不兼容。
2.用scrollTo方法会在苹果手机浏览器上会产生返回白屏问题

最后总结下来还是利用vue-router自带的滚动行为解决;官网有实例:

在 Vue项目的router文件夹下的index.js文件中加入以下代码即可解决:

  //页面跳转显示在顶部
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }

以上是本章的全部内容

你可能感兴趣的:(Vue)