使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router
能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。
注意: 这个功能只在 HTML5 history
模式下可用。
当创建一个 Router
实例,你可以提供一个 scrollBehavior
方法:
const router = new VueRouter({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) {return savedPosition} else {return { x: 0, y: 0 }}
}
如果你要模拟『滚动到锚点』的行为:
scrollBehavior (to, from, savedPosition) {if (to.hash) {return {selector: to.hash}}
}
我们还可以利用路由元信息更细颗粒度地控制滚动。查看完整例子:
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 selectorif (to.hash) {position.selector = to.hash}// 如果meta中有scrollTopif (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 = 0position.y = 0}// if the returned position is falsy or an empty object,// will retain current scroll position.return position}
}
与keepAlive
结合,如果keepAlive
的话,保存停留的位置:
scrollBehavior (to, from, savedPosition) {if (savedPosition) {return savedPosition} else {if (from.meta.keepAlive) {from.meta.savedPosition = document.body.scrollTop;}return { x: 0, y: to.meta.savedPosition ||0}}
}
在文档页面(http://localhost:8080/document
)拉动滚动条,然后刷新浏览器会发现滚动条依然在原来的位置,这是浏览器的默认行为,会记录浏览器滚动条默认位置。
但是点击浏览器“前进/后退”按钮,会发现当初那个页面的滚动条从0开始了,没有记录上一次滚动条的位置。现在要求点击浏览器“前进/后退”按钮,页面滚动条要记录上一次的位置,这时需要设置它的的滚动行为。
这时候需要在路由配置中设置 scrollBehavior(to,from,savePosition)
函数,函数有三个参数。scrollBehavior()
函数在点击浏览器的“前进/后退”,或者切换导航的时候触发。
scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”,或者切换导航的时候触发。console.log(to) // to:要进入的目标路由对象,到哪里去console.log(from) // from:离开的路由对象,哪里来console.log(savePosition) // savePosition:会记录滚动条的坐标,点击前进/后退的时候记录值{x:?,y:?}}
let router = new VueRouter({mode:'history',//默认是hash模式linkActiveClass:'menvscode-active',scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”,或者切换导航的时候触发。console.log(to) // to:要进入的目标路由对象,到哪里去console.log(from) // from:离开的路由对象,哪里来console.log(savePosition) // savePosition:会记录滚动条的坐标,点击前进/后退的时候记录值{x:?,y:?}if(savePosition) {return savePosition;}else{return {x:0,y:0}}},routes:[{path:'/',name:'index',component:Home,},{path:'/home',name:'Home',//name代表当前的路由component:Home,alias:'/index' //当访问'/index'的时候,就能匹配到当前的路由了。},{path:'/document',name:'Document',components:{ // 多个视图的时候,默认渲染default的视图。default:Document,slider:Slider,home:Home}}]
})
export default router
我们还可以设hash
来控制滚动行为,定位到某一位置
if(to.hash){ //先判断目标路由有没有hash值return {selector:to.hash}
}
App.vue
:在路径后面添加 hash
值。
<template><div id="app"><div class="nav-box"><ul class="f-cb"><li><router-link to="/" exact tag="div" event="mouseover">home</router-link></li><li><router-link :to="{path:'/document#abc'}" event="mouseover">document</router-link></li><router-link to="/about" tag="li" event="mouseover"><i></i><span>about</span></router-link></ul></div><div class="content f-cb"><router-view name="slider"></router-view> <!-- 命名视图 --><router-view class="center"></router-view></div></div>
</template>
@/components/Document.vue
<template><div>我是文档<p id="abc">定位到这个元素</p></div>
</template>
router/index.js
let router = new VueRouter({mode:'history',//默认是hash模式linkActiveClass:'menvscode-active',scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”,或者切换导航的时候触发。console.log(to) // to:要进入的目标路由对象,到哪里去console.log(from) // from:离开的路由对象,哪里来console.log(savePosition) // savePosition:会记录滚动条的坐标,点击前进/后退的时候记录值{x:?,y:?}/*if(savePosition) {return savePosition;}else{return {x:0,y:0}}*/if(to.hash){ //先判断目标路由有没有hash值return {selector:to.hash}}},routes:[]
})
export default router