vue列表首次刷新

业务需求

从列表页通过路由跳转至详情页，在详情页点返回按钮时，回到列表页。并保存滚动条状态高度，列表数据不刷新。

解决思路

• 页面缓存

  通过 keep-alive 属性 缓存页面。mounted 只执行一次，所以做第一次获取加载数据。activated每次进入页面都会执行。

• 滚动条高度

  通过获取滚动元素的scrollTop高度，将获取的高度存入store中，再返回时 通过 activated 改变滚动条高度

参考代码

<!--父组件-->
<keep-alive>
    <router-view class="box">
    </router-view>
</keep-alive>

在父组件的 router-view 外嵌套 keep-alive

  //第一次进入执行的函数
  mounted: function () {

  },
  //每次进入都执行的函数
  activated: function () {

  }
  //如果想 数据列表只刷新一次 那么只需要在 mouted函数里 写一个数据请求 那么用户通过路由跳转 再次返回界面是 数据不需要重新加载和渲染

完整代码

store.js(vuex)

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let store=new Vuex.Store({
    state:{
        scrollTop:0
    },
    mutations:{
        myscrollTop:(state,scrollTop)=>{
          state.scrollTop=scrollTop
        }
    }
})
export default store

父组件代码

<template>
  <div class="m-index">
    <keep-alive>
    <router-view>
    </router-view>
    </keep-alive>
  </div>
</template>
<script>
  export default {
    data(){
      return{
      }
    }
  }
</script>

子组件代码

<template>
  <div class="m-home">
    <div v-for="item in data" :key="item.key" @click="jump(item)">item</div>
  </div>
</template>
<script>
import Vue from 'vue'
import axios from 'axios'
import store from '../../vuex/store.js'
//判断数据列表条数 固定或非固定footer
export default {
  data: function data() {
    return {
      lawyerlist:[]
    }
  },
methods:{
    jump(index){
    //跳转到另一个页面
      this.$router.push({ name: 'register'})
      //保存scrollTop 值
      store.commit("myscrollTop",document.getElementsByClassName("m-home")[0].scrollTop)
    }
},
  //第一次进入页面刷新
  mounted: function mounted() {
    //do something after mounting vue instance
    let that=this
    axios.get('http://10.10.1.156:3005/people')
    .then(function (res) {
        that.lawyerlist=res.data
    })
    .catch(function (error) {
      console.log(error);
    });
  },
  //每次进入时都执行的函数
  activated: function () {
    //进入页面直接改变scrollTop
    document.getElementsByClassName("m-home")[0].scrollTop=store.state.scrollTop
  }
}
</script>
<style lang="scss">
</style>