vue使用keep-alive切换页面，2种方法实现页面保持滚动位置底部有代码可供下载

本文介绍两种在Vue项目中保持页面滚动位置的方法：一是通过自定义指令实现；二是利用全局路由控制来完成。两种方法均可有效保存用户滚动状态。

1.使用自定义指令

一、在main.js中编写一个自定义指令

import Vue from 'vue'
import App from './App.vue'
import router from '@/router'

Vue.config.productionTip = false


Vue.directive('scroll', function(el,bind,VNode){
  el.style.overflow = 'scroll'
  el.addEventListener('scroll',function(){ //给页面添加监听滚动条事件
    VNode.context.scrollTop = el.scrollTop
  })
})

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

二.在需要保持滚动位置vue页面使用自定义指令

<template>
  <div class="page1" ref="scroll" v-scroll>
    <h1>page1</h1>
    <div class="number" v-for="i in 6" :key="i" v-text="i"></div>
    <div class="fixed">
      <router-link to="/page2" tag="button">去page2</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name:'page1',
  data() {
    return {
      scrollTop: 0,
    };
  },
  activated() {
    //页面每次激活时 都会获取之前的scrollTop
    this.$refs.scroll.scrollTop = this.scrollTop;
  },
};
</script>

2、通过全局路由控制

一、配置路由

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Page1 = () => import('@/views/page1.vue')
const Page2 = () => import('@/views/page2.vue')

const router = new VueRouter({
    mode: 'history', //hash ,history
    routes: [{
            path: '/page1',
            component: Page1,
            meta: {
                keepAlive: true,
                scrollTop: 0,
            }
        },
        {
            path: '/page2',
            component: Page2
        },
    ]
})

router.beforeEach((to, from, next) => {
    if (from.meta.keepAlive) { //判断是否为需要保活的路由
        const scrollTop = document.querySelector('#app>div').scrollTop; //获取该路由页面的scrollTop
        from.meta.scrollTop = scrollTop || 0;
    }
    next();
});
export default router

二.在需要保持滚动位置vue页面使用

<template>
  <div class="page1" ref="scroll" v-scroll>
    <h1>page1</h1>
    <div class="number" v-for="i in 6" :key="i" v-text="i"></div>
    <div class="fixed">
      <router-link to="/page2" tag="button">去page2</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "page1",
  //路由控制
  activated() {
    const scrollTop = this.$route.meta.scrollTop;
    this.$refs.scroll.scrollTop = scrollTop;
  },
};
</script>

效果时一样的

代码下载：demo下载免积分下载