滚动行为
vuerouter结合访问多个页面,可以保留用户在某个页面中访问的滚动条位置,用户在 不同页面切换过程中可以保障用户切换到历史页面时,保持阅读位置,提高用户体验
大部分应用场景中,多个页面组件切换时不需要记录当前页面滚动位置,直接切换页面之后滚动到页面顶部即可,编辑 src/router/index.js
,完成页面位置指定:
...
const router = new VueRouter({
routes:[...],
//scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
scrollBehavior: (to, from, savePosition) => {
// return 期望滚动到哪个的位置
// to:跳转到哪个页面
// from:来自哪个页面
//savePosition:位置
// 常规的一种做法,直接禁止滚动行为,每个页面切换时自动回到顶部
return {x: 0, y:0}
}
})
...
注意事项:对于特殊页面的位置,可以进行自定义记录,如存储位置到本地存储
...
const router = new VueRouter({
routes:[...],
scrollBehavior: (to, from, savePosition) => {
// 常规的一种做法,直接禁止滚动行为,每个页面切换时自动回到顶部
// return {x: 0, y:0}
// 针对特殊页面,独立保存它们的滚动位置
// 1、从to/form获取通过访问路径 判断是哪个路由页面
if(from.fullPath === "/home") {
// 记录位置
let y = savePosition && savePosition.y
localStorage.setItem('homey', y)
}
if(to.fullPath === "/home"){
// 获取位置
let y = localStorage.getItem('homey')
if(y) {
return {x: 0, y: parseFloat(y)}
}
}
// 其他页面路径
return {x: 0, y: 0}
}
})
...