英特网校

解决vue-router切换路由时没有滚动到顶部

在做vue项目时,发现一个问题,通过vue-router切换页面时,如果从一个页面的底部切换到新页面,新开的页面初始也会在底部。

使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。


可以在router文件夹下的index.js中设置scrollBehavior属性,添加代码,注意使用的是vue-cli脚手架搭建的环境

scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }

目录结构:

未标题-1.png

文件结构:

1.png

评论中心

登录后可评论,请 登录 注册