一.微信小程式。

微信小程式提供了onLoad,onShow方法進入頁面獲取列表資料。onLoad如果第一次進入頁面之後，再次進入時不再觸發onLoad函式。小程式每次進入頁面都會觸發onShow方法，如果在onShow裡面實現呼叫列表介面可以每次從新獲取資料，但是頁面也會重新載入，資料量大的時候使用者體驗不好。所以可以使用小程式頁面棧裡的方法來更好的處理這些問題。

1.新增資料

新增資料，新增資料一般按照發布的時間倒序顯示，所以新增的時候直接在詳情頁面呼叫列表頁面的onLoad()方法即可，具體實現如下：

詳情頁面（儲存成功之後呼叫）：

　　letpages=getCurrentPages();//當前頁面棧 if(pages.length>1){ 　　let beforePage=null; 　　for(leti=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){ //記錄刪除索引 　letindex=ev.currentTarget.dataset.itemindex; wx.setStorageSync("readIndex",index); leturl=ev.currentTarget.dataset.url; app.hrefToPageFn(url); }, //刪除函式 deleteItemCallback(index){ letlist =JSON.parse(JSON.stringify(this.data.list)); list.splice(index,1); this.setData({ list }); }, 詳情頁面，刪除成功之後呼叫： if(backdata.data.status==200){ letitemindex=wx.getStorageSync('readIndex'); letpages=getCurrentPages();//當前頁面棧 if(pages.length>1){ varbeforePage=null; for(leti=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 => {
    //獲取列表資料方法
    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