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>