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'//判断数据列表条数 固定或非固定footerexport 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>