scrollBehavior作为?的一个参数,接收???三个参数
vue-router实例 to, from, savedPosition
在main.js文件下,注意routes是引入的router/index.js中的代码
const router = new VueRouter({
routes,
mode: routerMode, //routerMode可以是history 可以是hash
// 在严格模式下,无论何时发生了状态变更且不是由 mutation 函数引起的,将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。
strict: process.env.NODE_ENV !== 'production',
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 }
}
}
})
/**
* scrollBehavior这个整体做的是:在路由的history模式下,一些列表页利用缓存模式来记录位置(一般是返回不刷新,前进刷新),
* 一般用了scrollBehavior,同时还用keep-alive(缓存),activated(缓存下触发的钩子)配合做列表页的返回记录位置。
* 缓存模式也有坑,就是何时清除缓存,一般是重新进入页面就清除。
* 回到主题,滚动行为就是:例如一个列表页,滑动了很多,点进去、再返回记录刚刚的位置
*/