1、滚动行为
使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。
注意: 这个功能只在支持 history.pushState 的浏览器中可用。
当创建一个 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
,参考这里 (opens new window))的值,或者是一个空对象,那么不会发生滚动。
2、滚动行为解释
vuerouter结合访问多个页面,可以保留用户在某个页面中访问的滚动条位置,用户在 不同页面切换过程中可以保障用户切换到历史页面时,保持阅读位置,提高用户体验
大部分应用场景中,多个页面组件切换时不需要记录当前页面滚动位置,直接切换页面之后滚动到页面顶部即可,编辑 src/router/index.js
,完成页面位置指定:
\
注意事项:对于特殊页面的位置,可以进行自定义记录,如存储位置到本地存储
代码
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
scrollBehavior: (to, from, savePosition) => {
// 常规的一种做法,直接禁止滚动行为,每个页面切换时自动回到顶部
// return {x: 0, y:0}
console.log('savePosition',savePosition);
// 针对特殊页面,独立保存它们的滚动位置
if(to.fullPath === "/"){
let yy = savePosition && savePosition.y
return {x: 0, y: yy}
}
// 其他页面路径
return {x: 0, y: 0}
}
//scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition
//当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
// scrollBehavior: (to, from, savePosition) => {
// // return 期望滚动到哪个的位置
// // to:跳转到哪个页面
// // from:来自哪个页面
// //savePosition:位置
// // 常规的一种做法,直接禁止滚动行为,每个页面切换时自动回到顶部
// return { x: 0, y: 0 }
// }
})