本文共 4386 字,大约阅读时间需要 14 分钟。
原文
使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 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 selector if (to.hash) { position.selector = to.hash } // 如果meta中有scrollTop 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 }}
与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} }}
在文档页面()拉动滚动条,然后刷新浏览器会发现滚动条依然在原来的位置,这是浏览器的默认行为,会记录浏览器滚动条默认位置。
但是点击浏览器“前进/后退”按钮,会发现当初那个页面的滚动条从0开始了,没有记录上一次滚动条的位置。现在要求点击浏览器“前进/后退”按钮,页面滚动条要记录上一次的位置,这时需要设置它的的滚动行为。
这时候需要在路由配置中设置 scrollBehavior(to,from,savePosition)函数,函数有三个参数。scrollBehavior() 函数在点击浏览器的“前进/后退”,或者切换导航的时候触发。
scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”,或者切换导航的时候触发。
console.log(to) // to:要进入的目标路由对象,到哪里去
console.log(from) // from:离开的路由对象,哪里来
console.log(savePosition) // savePosition:会记录滚动条的坐标,点击前进/后退的时候记录值{x:?,y:?}
}
实现滚动行为的代码: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}
}
},
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
转载地址:http://rcwii.baihongyu.com/