使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 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}
}
}
ue路由中设置滚动行为(scrollBehavior)
在文档页面(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:?}
}
实现滚动行为的代码：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