vue记录当前路由滚动位置

本文参考自： https://www.jianshu.com/p/2d6ab322a9cb

先使用 <keep-alive> 缓存组件

App.vue 文件添加缓存

<div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view> 
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

 

路由文件里面添加A，B，C组件

keepAlive 代表使用缓存

export default new Router({
  mode: "history",   // 删除浏览器里面的 /#
  routes: [
    {
      path: '/',
      name: 'A',
      component: () => import('../pages/A.vue'),
      meta: {
        title: 'A',
        keepAlive: true
      }
    },
    {
      path: '/B',
      name: 'B',
      component: () => import('../pages/B.vue'),
      meta: {
        title: 'B',
        keepAlive: true
      }
    },
    {
      path: '/C',
      name: 'C',
      component: () => import('../pages/C.vue'),
      meta: {
        title: 'C',
        keepAlive: true
      }
    },
  ]
})

main.js 文件定义一个全局变量，用来记录当前路由的scrollTop滚动值。

监听当前路由离开时，把当前scrollTop值赋值给全局变量，在重新进入

路由时，设置当前的scrollTo值为scrollTop。

let homeScrollTop = 0;
Vue.prototype.$homeScroll = homeScrollTop; // 全局滚动位置

 

A.vue 代码

<template>
  <div class="">
    这是A页面
    <ul class="ul">
      <li v-for="(item, index) in list" :key="index" @click="listItemClick">
        {{item}}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
  data() {
    return {
      list: [
        1,2,3,4,5
      ]
    };
  },
  // 进入路由即触发 created()只触发一次
  activated () {
    this.$nextTick(() => {
        window.scrollTo(0, this.$homeScroll);
        console.log(this.$homeScroll, 2);
    })
  },
  //离开路由时
  beforeRouteLeave(to, from, next){
    console.log(to);
    //全局变量homeScroll默认为0 离开页面时 记录当前的页面滚动值
    this.$homeScroll = document.documentElement.scrollTop || document.body.scrollTop;
    console.log(this.$homeScroll, 1);
    //需要执行next函数 否则不起作用
    next();
  },
  created() {
    console.log('created, a')
  },
  mounted() {

  },
  methods: {
    listItemClick () {
      this.$router.push({path: '/B'});
    }
  },
}
</script>

<style lang='less' scoped>
.ul {
  padding: 0;
  margin: 0;
  list-style: none;
  li {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

 

B.vue 文件

<template>
  <div>
    Byemian
    <button @click="goBack(true)">返回</button>
    <button @click="goBack()">跳转C组件</button>
  </div>
</template>

<script>
  export default {
  data() {
    return {

    };
  },
  created() {

  },
  mounted() {

  },
  methods: {
    goBack (val) {
      val ? this.$router.push({path: '/'}) : this.$router.push({path: '/C'});
    }
  },
}
</script>

<style lang='less' scoped>

</style>

 

C.vue 文件

<template>
  <div>
    Cyemian
    <ul class="ul">
      <li v-for="(item, index) in list" :key="index" @click="listItemClick">
        {{item}}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
  data() {
    return {
      list: [
        'A','B','C','D','E'
      ]
    };
  },
  created() {
    console.log('created, c')
  },
  mounted() {

  },
  // 进入路由即触发 created()只触发一次
  activated () {
    this.$nextTick(() => {
        window.scrollTo(0, this.$homeScroll);
        console.log(this.$homeScroll, 2);
    })
  },
  //离开路由时
  beforeRouteLeave(to, from, next){
    console.log(to);
    //全局变量homeScroll默认为0 离开页面时 记录当前的页面滚动值
    this.$homeScroll = document.documentElement.scrollTop || document.body.scrollTop;
    console.log(this.$homeScroll, 1);
    //需要执行next函数 否则不起作用
    next();
  },
  methods: {
    listItemClick () {
      this.$router.push({path: '/'});
    }
  },
}
</script>

<style lang='less' scoped>
.ul {
  padding: 0;
  margin: 0;
  list-style: none;
  li {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>