原文https://www.cnblogs.com/sophie_wang/p/7880261.html
https://blog.csdn.net/wandoumm/article/details/80270865
使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 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}
}
}
在文档页面(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