vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
有时候我们需要页面滚动条滚动到某一固定的位置,一般使用WindowscrollTo()方法。
语法就是:scrollTo(xpos,ypos)
xpos:必需。要在窗口文档显示区左上角显示的文档的x坐标。
ypos:必需。要在窗口文档显示区左上角显示的文档的y坐标。
例如滚动内容的坐标位置100,500:
window.scrollTo(100,500);
好了,这个scrollTop这儿只是简单介绍一下,下面我们介绍下veu-router中的滚动行为。
使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。vue-router能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。
注意:这个功能只在HTML5history模式下可用。
当创建一个Router实例,你可以提供一个scrollBehavior方法:
constrouter=newVueRouter({ routes:[...], scrollBehavior(to,from,savedPosition){ //return期望滚动到哪个的位置 } })
scrollBehavior方法接收to和from路由对象。第三个参数savedPosition当且仅当popstate导航(通过浏览器的前进/后退按钮触发)时才可用。
这个方法返回滚动位置的对象信息,长这样:
{x:number,y:number} {selector:string,offset?:{x:number,y:number}}(offset只在2.6.0+支持)
如果返回一个falsy(译者注:falsy不是false,参考这里)的值,或者是一个空对象,那么不会发生滚动。
举例:
scrollBehavior(to,from,savedPosition){ return{x:0,y:0} }
对于所有路由导航,简单地让页面滚动到顶部。
返回savedPosition,在按下后退/前进按钮时,就会像浏览器的原生表现那样:
scrollBehavior(to,from,savedPosition){ if(savedPosition){ returnsavedPosition }else{ return{x:0,y:0} } }
如果你要模拟『滚动到锚点』的行为:
scrollBehavior(to,from,savedPosition){ if(to.hash){ return{ selector:to.hash } } }
我们还可以利用路由元信息更细颗粒度地控制滚动。
routes:[ {path:'/',component:Home,meta:{scrollToTop:true}}, {path:'/foo',component:Foo}, {path:'/bar',component:Bar,meta:{scrollToTop:true}} ]
完整的例子:
importVuefrom'vue' importVueRouterfrom'vue-router' Vue.use(VueRouter) constHome={template:'home'} constFoo={template:'foo'} constBar={ template:`barAnchor
ScrollBehavior
/ /foo /bar /bar#anchor
在网上查了一下,网友说还可以试试在main.js入口文件配合vue-router写这个
router.afterEach((to,from,next)=>{ window.scrollTo(0,0); });
总结
以上所述是小编给大家介绍的vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!