vue中使⽤vue-router切换页⾯时滚动条⾃动滚动到顶部
的⽅法
有时候我们需要页⾯滚动条滚动到某⼀固定的位置，⼀般使⽤Window scrollTo() ⽅法。
语法就是：scrollTo(xpos,ypos)
xpos：必需。要在窗⼝⽂档显⽰区左上⾓显⽰的⽂档的 x 坐标。
ypos：必需。要在窗⼝⽂档显⽰区左上⾓显⽰的⽂档的 y 坐标。
例如滚动内容的坐标位置100,500：
window.scrollTo(100,500);
好了，这个scrollTop这⼉只是简单介绍⼀下，下⾯我们介绍下veu-router中的滚动⾏为。
使⽤前端路由，当切换到新路由时，想要页⾯滚到顶部，或者是保持原先的滚动位置，就像重新加载页⾯那样。 vue-router 能做到，⽽且更好，它让你可以⾃定义路由切换时页⾯如何滚动。
注意: 这个功能只在 HTML5 history 模式下可⽤。
当创建⼀个 Router 实例，你可以提供⼀个 scrollBehavior ⽅法：
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
react面试题中的router}
})
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) {
return savedPosition
} 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 }}
]
完整的例⼦：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const Home = { template: '<div>home</div>' }
const Foo = { template: '<div>foo</div>' }
const Bar = {
template: `
<div>
bar
<div ></div>
<p id="anchor">Anchor</p>
</div>
`
}
// scrollBehavior:
/
/ - only available in html5 history mode
// - defaults to no scroll behavior
// - return false to prevent scroll
const scrollBehavior = (to, from, savedPosition) => {
if (savedPosition) {
// savedPosition is only available for popstate navigations.
return savedPosition
} else {
const position = {}
// new navigation.
// scroll to anchor by returning the selector
if (to.hash) {
position.selector = to.hash
}
// check if any matched route config has meta that requires scrolling to top  if (to.matched.some(m => m.meta.scrollToTop)) {
// cords will be used if no selector is provided,
// or if the selector didn't match any element.
position.x = 0
position.y = 0
}
// if the returned position is falsy or an empty object,
// will retain current scroll position.
return position
}
}
const router = new VueRouter({
mode: 'history',
base: __dirname,
scrollBehavior,
routes: [
{ path: '/', component: Home, meta: { scrollToTop: true }},
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar, meta: { scrollToTop: true }}
]
})
new Vue({
router,
template: `
<div id="app">
<h1>Scroll Behavior</h1>
<ul>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/foo">/foo</router-link></li>
<li><router-link to="/bar">/bar</router-link></li>
<li><router-link to="/bar#anchor">/bar#anchor</router-link></li>
</ul>
<router-view class="view"></router-view>
</div>
`
}).$mount('#app')
在⽹上查了⼀下，⽹友说还可以试试在main.js⼊⼝⽂件配合vue-router写这个
router.afterEach((to,from,next) => {
window.scrollTo(0,0);
});
总结
以上所述是⼩编给⼤家介绍的vue中使⽤vue-router切换页⾯时滚动条⾃动滚动到顶部的⽅法，希望对⼤
家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。