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部分

<template>
    <div class="tabbar">
        <keep-alive>
            <router-view class="content-box"></router-view>
        </keep-alive>
        <tabbar :tabbarList='tabbarList'/>
    </div>
</template>

在home路由中的示例，其他路由设置一样

1. html

   <template>
       <div class="need-scroll">
           <!--内容部分 -->
       </div>
   </template>
   

2. 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()
       }
   }