vue專案中keep-alive快取，從詳情頁返回列表時儲存上一步的資訊

666888發表於2019-02-16
VueKeep-Alive快取

問題由來

1、最近用vue做前端專案，從查詢頁面進入詳情頁時，返回頁面需要保留上次的查詢條件，表格當前頁數。
2、從其他選單進去，不需要快取，要保持頁面的初始狀態。
基於上面兩種情況，我打算用vue中的keep-alive來快取頁面。

問題的解決方法

  • 列表專案

. 用vue的內建元件keep-alive來快取列表頁面，再路由出口渲染元件時配置：

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
  • 在路由選項中，配置meta屬性，keepAlive為true即為需要快取，同時設定isBack屬性，用來標識頁面是否是從詳情頁面返回的。
{
  name:`borrow`,
  path:`/borrow`,
  component:borrow,
  meta: {
    keepAlive:true,
    isBack: true,
  },
}
  • 通過beforeRouteEnter(to,from,next)，來判斷路由是從哪裡跳轉的，如果是從詳情頁跳轉的，將當前路由物件的meta.isBace設定為true，否則設定為false。（設定在查詢頁面）
beforeRouteEnter(to, from, next) {
  if (from.path == "/addborrow") {
      to.meta.isBack = true;
    } else {
      to.meta.isBack = false;
    }
    next();
},
  • 為了在其他頁面進入時，更新頁面中的列表資料和查詢條件，我們將在activated鉤子函式中掛在頁面初次進入時的請求資料。當進入詳情頁，需要對該條資料進行修改時，修改成功後返回，應該更新列表。
activated() {
  if (!this.$route.meta.isBack) {
    this.handleClear(`queryForm`);/*清空查詢條件*/
  }else{
    this.$route.meta.isBack = false;
    this.getBorrowList();/*列表重新載入*/
  }
},

參考資料

https://yq.aliyun.com/article…

相關文章