开发中的问题:
场景1 在用前端路由,当切换到新路由时,想要页面滚动到顶部,或者保持原先滚动位置,就像重新加载页面那样。
场景2 在一个很长的列表页往下拉,然后点击列表中的某一数据进入到详情页查看。此时决定返回列表也继续查看列表。很多情况下,由于列表页的组件已经被销毁,所以我们返回到列表页面会置顶,不得不重新下拉查看列表,这样就做了很多没有必要的操作,也是不符合用户的预期。
滚动行为
通过vue-router自定义路由切换时页面如何滚动。当跳转新路由时,页面滚动到某个位置;切换路由时页面回到之前的位置。
// srcollBehavior 方法
const router = createRouter({
history: createWebHashHistory(), // createWebHistory 是 Vue Router 提供的一种基于浏览器 history API 的路由模式
routes:[...],
srcollBehavior(to, from, savedPositon){
// return 期望滚动到哪个的位置
}
})
srcollBehavior 方法接收 to 和 from路由对象,第三个参数savedPositon 当且仅当 popstate导航(通过浏览器前进/后退按钮触发)时才可用。
return{ x:number, y:number} // 来控制页面滚动的位置
对于所有路由导航,简单地让页面滚动到顶部。
srcollBehavior (to, from, savedPositon ){
return {x:0,y:0}
}
// 或
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
// 始终滚动到顶部
return { top: 0 }
},
})
新增异步滚动:
当页面数据需要请求加载延迟的情况下,页面如果直接滚动,会出现滚动后,页面数据请求回来,DOM重新渲染,滚动失效。
scrollBehavior(to, from, savedPosition){
return new Promise((resolve,reject)=>{
setTimeour(()=>{
resolve({x:0,y:0})
},500)
})
}
滚动到元素位置
可以通过 el 传递一个 CSS 选择器或一个 DOM 元素。在这种情况下,top 和 left 将被视为该元素的相对偏移量。
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
// 始终在元素 #main 上方滚动 10px
return {
// el: document.getElementById('main'),
el: '#main',
top: -10,
}
},
})
滚动到锚点位置
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
if (to.hash) {
return {
el: to.hash,
}
}
},
})
滚动到之前的位置
在按下浏览器 后退/前进 按钮,或者调用 router.go() 方法时,页面会回到之前的滚动位置:
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { top: 0, behavior: 'smooth' }
}
},
})
// 如果返回一个false的值,或者是一个空对象,则不会发生滚动。我们还可以在返回的对象添加behavior:‘smooth’,让滚动更加丝滑。
scrollIntoView()
如果想要在特定的按钮点击事件中实现平滑滚动可以使用 scrollIntoView 方法。scrollIntoView()将调用它的元素滚动给到浏览器窗口的可见区域顶部。
element.scrollIntoView(); // 等同于 element.scrollIntoView(true)
element.scrollIntoView(alignToTop); //布尔参数。接受布尔值主要还是为了兼容不支持平滑滚动(老版)的浏览器
element.scrollIntoView(scrollIntoViewOptions); //对象参数
参数:
alignToTop:true时,相当于{behavior: ‘auto’, block: ‘start’, inline: ‘nearest’}; false时,相当于{behavior: ‘auto’, block: ‘end’, inline: ‘nearest’}; 未传入参数时,默认值为:{behavior: ‘auto’, block: ‘start’, inline: ‘nearest’}
scrollIntoViewOptions:一个包含下列属性的对象。
使用缓存,即不销毁列表页
// APP.js中
<template>
<div id="app">
<!-- <router-view/> -->
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
</div>
</template>
// router.js中
routes: [
{
path: '/',
name: 'List',
//component: List
component: () => import('./views/index/list.vue'),
meta: {
keepAlive: true // 需要缓存
}
},
{
path: '/content/:contentId',
name: 'content',
component: () => import('./views/index/content.vue'),
meta: {
keepAlive: false // 不需要缓存
}
},
]
使用路由守卫
原理就是在beforeRouterLeave的路由钩子记录当前页面滚动位置。
//在页面离开时记录滚动位置,这里的this.scrollTop可以保存在vuex的state或者浏览器本地
beforeRouteLeave (to, from, next) {
this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
next()
},
//进入该页面时,用之前保存的滚动位置赋值
beforeRouteEnter (to, from, next) {
next(vm => {
document.body.scrollTop = vm.scrollTop
})
},