最后
面试题千万不要死记,一定要自己理解,用自己的方式表达出来,在这里预祝各位成功拿下自己心仪的offer。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
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}
}
### 最后
![前15.PNG](https://img-blog.csdnimg.cn/img_convert/aa1fd7cc6f9932d07faac247bd718f15.webp?x-oss-process=image/format,png)
![前16.PNG](https://img-blog.csdnimg.cn/img_convert/baf201578119c10e5d14361172d487de.webp?x-oss-process=image/format,png)
>由于文档内容过多,为了避免影响到大家的阅读体验,在此只以截图展示部分内容
>
>**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**