一.微信小程序。

微信小程序提供了onLoad,onShow生命周期函数来进入页面获取列表数据。onLoad和onShow区别：onLoad，如果第一次进入页面之后，再次进入时不再触发。onShow，小程序每次进入页面都会触发，如果在onShow里调用列表接口，可以每次获取最新数据，但是页面也会重新加载，如果数据量大，用户体验不好。所以可以使用小程序页面栈提供的方法来更好的处理这些问题。

1.新增数据

新增数据，新增数据一般按照发布的时间显示最新数据，所以新增的时候直接在详情页面调用列表页面的onLoad()方法即可，具体实现如下：

详情页面（保存成功之后调用）：

　

let pages =getCurrentPages();//当前页面栈
       if (pages.length >1) {
       　　let beforePage = null;
       　　for(let i = 0; i < pages.length; i++){
          　 　　if(pages[i].route === 'pages/dynamic/dynamic' || pages[i].route === 'pages/notice/notice'){
              　　beforePage = pages[i];
          　}
        }
        beforePage.onLoad();//触发父页面中的方法
      }


列表页面：

onLoad: function (options) {
   　//调用列表的方法逻辑
　　this.setData({
       　　noticeDyns: [],
       　　page: 1
      });
　  this.getList();
  },

2.删除数据，如果删除按钮在详情页面里面，进入详情页面需要记录当前删除数据的所引。

列表页面：

//跳转到详情页
  clickPages: function (ev) {
    //记录删除索引
　let index = ev.currentTarget.dataset.itemindex;
    wx.setStorageSync("readIndex", index);
    let url = ev.currentTarget.dataset.url;
    app.hrefToPageFn(url);
  },
  //删除函数
deleteItemCallback(index){
    let list = JSON.parse(JSON.stringify(this.data.list));
    list.splice(index,1);
    this.setData({
      list
    });
  },

详情页面，删除成功之后调用：

if (backdata.data.status == 200) {
      let itemindex = wx.getStorageSync('readIndex');
      let pages =getCurrentPages();//当前页面栈
      if (pages.length >1) {
        var beforePage = null;
        for(let i = 0; i < pages.length; i++){
          if(pages[i].route === 'pages/notice/notice'){ //列表页面名字
            beforePage = pages[i];
          }
        }
        beforePage.deleteItemCallback(itemindex);//触发父页面中的方法
      }
      wx.showToast({
        title: "删除成功",
        icon: "success",
        mask: true,
        success: function () {
          setTimeout(function () {
            wx.navigateBack()
          }, 500)
        }
      });
    }

3.修改数据,与删除类似，需要记录对应的索引。

4.查看数据详情返回定位问题

如果只是查看详情，只需将获取列表逻辑写到onLoad里即可。

二.web端-vue

使用vue提供了keep-alive功能。具体实现：

1.router.js，需要缓冲的页面添加meta:{keepAlive:true}

{
  path: 'lessonList/lessondetail',
  component: TeacherNewLesson,
  meta: {
    keepAlive: false // 不需要缓存
  }
},
{
  path: 'lessonList/newLesson',
  component: TeacherNewLesson,
  meta: {
    keepAlive: true // 需要缓存
  }
},
{
  path: 'questionlist',
  component: QuestionList,
  meta: {
    keepAlive: true // 需要缓存
  }
},

2.router-view页面

<div id="app" class="applica">
  <keep-alive>
    <router-view :key="this.$route.path" v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view :key="this.$route.path" v-if="!$route.meta.keepAlive"></router-view>
</div>

3. 列表页面，获取最新数据，有两种方法，和methods,data同级。

1）使用beforeRouteEnter钩子函数。

beforeRouteEnter(to, from, next) {
  next(vm => {
    //获取列表数据方法
    if(from.path === `/teacherHome/questionlist/questionDetail`){
      //详情页进入
      vm.getquestionList();
    }else{
      //主页进入
      console.log(vm.pageIndex);
      vm.pageIndex = 1;
      vm.currentPage = 1;
      vm.getquestionList();
    }
  })
},

2）使用keep-alive会触发activated方法，再次进入created和mounted方法不再调用。

activated() {
  this.getquestionList();
},

3）列表进入详情页面函数，加入标识（query: {problemId: problemId}}）判断是新增还是修改。

questionDetail(index, row) {
  let problemId = this.tableData[index].problemId;
　//修改
  this.$router.push({path: '/teacherHome/questionlist/questionDetail', query: {problemId: problemId}})
　//新增
this.$router.push({path: '/teacherHome/questionlist/questionDetail'})
},

4. 详情页面,加入beforeRouteLeave钩子函数。

beforeRouteLeave (to, from, next) {
  if (to.path == "/teacherHome/questionlist") {
    if(!from.query.problemId){
　　　 //新增
      to.meta.keepAlive = false;
    }else{
　　　　//修改
　　　　to.meta.keepAlive = true;
}
  } else {
    to.meta.keepAlive = false;
  }
  next();
},

5. 列表删除数据。列表每次删除数据都回到第一页用户体验不好，可以添加判断进行逻辑处理。

//分页
handleCurrentChange(val) {
  this.pageIndex = val;
  this.getquestionList()
},
//删除函数
handleDelete(id, rows) {
  let contestId = sessionStorage.getItem("contestId");
  this.$confirm(`确定删除该数据吗？`).then(_ => {
    this.$http
      .get("BUAAOJ/problems/deleteProblem/" + contestId + "/" + id, {})
.then(response => {
        if (response.status == -1) {
          this.$remind.message(response.info, "warning");
        } else {
　　　　　　//删除总数减一
          this.totalNUm--;
          if (this.totalNUm <= (this.pageIndex - 1) * this.pageSize) {
　　　　　　　//判断最后一页删除
            this.pageIndex--;
　　　　　　　if(this.pageIndex===0)return;
this.getquestionList();
          } else {
            this.getquestionList();
          }
        }
      })
      .catch(error => {
      });
  }).catch(_ => {
  })
},

6.兼容性测试
firefox，webkit