Vue 中在路由切换的时候保留之前滚动条的高度 |
您所在的位置：网站首页 › vue获取页面滚动高度 › Vue 中在路由切换的时候保留之前滚动条的高度 |
Vue 中在路由切换的时候保留之前滚动条的高度
|
Vue 中在路由切换的时候保留之前滚动条的高度
效果图 说明： 实现的主要思路是首先使用keep-alive将路由缓存起来，再需要保存滚动条的页面使用组件的路由拦截beforeRouteEnter和beforeRouteLeave 组件内的守卫的官方介绍 实现 router部分 const routes = [ // tabbar { path: '/', redirect: '/home', name: 'tabbar', meta: { keepAlive: true }, component: () => import(/* webpackChunkName: "tabbar" */ '@/views/tabbar'), children: [ { path: 'home', name: 'home', meta: { keepAlive: true }, component: () => import('@/views/tabbar/home') }, { path: '/classify', name: 'classify', meta: { keepAlive: true }, component: () => import('@/views/tabbar/classify') }, { path: '/message', name: 'message', meta: { keepAlive: true,needToken: true }, component: () => import('@/views/tabbar/message') }, { path: '/shopcar', name: 'shopcar', meta: { keepAlive: true,needToken: true }, component: () => import('@/views/tabbar/shopcar') }, { path: '/personal', name: 'personal', meta: { keepAlive: true,needToken: true }, component: () => import('@/views/tabbar/personal') } ] } ] 用来进行路由的跳转的html部分 在home路由中的示例，其他路由设置一样 html js 在路由每次进入的时候都会触发beforeRouteEnter 每次离开的时候beforeRouteLeave就会执行 因此，在每次离开路由的时候，保存当前的高度，进入的时候就给高度赋值export default { data(){ return { rememberScroll: 0 } }, beforeRouteEnter(to,from,next){ next(vm => { document.querySelector('.need-scroll').scrollTop = vm.rememberScroll }) }, beforeRouteLeave(to,from,next){ if(document.querySelector('.need-scroll')) { this.rememberScroll = document.querySelector('.need-scroll').scrollTop } next() } } |
【本文地址】
今日新闻 |
推荐新闻 |