vue項目中keep-alive緩存，從詳情頁返回列表時保存上一步的信息

問題由來

一、最近用vue作前端項目，從查詢頁面進入詳情頁時，返回頁面須要保留上次的查詢條件，表格當前頁數。
二、從其餘菜單進去，不須要緩存，要保持頁面的初始狀態。
基於上面兩種狀況，我打算用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...