猿记录

一个记录、分享的博客

您的位置:主页 > 技术专栏 > javascript > vue >

vue-router 路由跳转滚动条返回到顶部

2017-12-01 10:07:22 作者:yxl 次阅读 vue

在使用vue做单页面应用开发时候 使用vue-router作为路由控制器  在使用过程中发现每个页面打开都在原来的位置 不能返回到页面顶部位置
以下有两种解决方案:
1、会用scrollBehavior,在路由配置文件中添加scrollBehavior属性

     scrollBehavior(to, from, savedPosition){

       if(savedPosition){

           return savedPosition;

       }

       if(to.meta.scrollTop === true){

           return { x: 0, y: 0 };

      }

    },
2、有时候发现上面的方法不起效果,查阅文档发现使用了过渡动画,这个是不起效果的,所以有了以下的另一种解决方法:
    在beforeEach钩子函数中直接操作scrollTop属性,强制返回顶部
     router.beforeEach((to, from, next) => {
           document.body.scrollTop = 0;
         next()
    });

3、在main.js中

    router.afterEach((to, from, next) => {

        window.scrollTo(0, 0);

    })


凡本站注明“本站”或“投稿”的所有文章,版权均属于本站或投稿人,未经本站授权不得转载、摘编或利用其它方式使用上述作品。

编辑:yxl 关键词:
0

网友评论