<ul id="2ikae"></ul>

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

justjavac 發布于2019-08-23 14:10 / 3487人閱讀

摘要：問題由來最近用做前端項目，從查詢頁面進入詳情頁時，返回頁面需要保留上次的查詢條件，表格當前頁數。從其他菜單進去，不需要緩存，要保持頁面的初始狀態。當進入詳情頁，需要對該條數據進行修改時，修改成功后返回，應該更新列表。

問題由來

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

問題的解決方法

列表項目

. 用vue的內置組件keep-alive來緩存列表頁面，再路由出口渲染組件時配置：

在路由選項中，配置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...

GPU云服務器云服務器 js返回上一頁 asp 返回上一頁返回上一頁js代碼 php返回到上一頁

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100210.html

Vue keepAlive 數據緩存工具，實現返回上一個頁面瀏覽的位置；

摘要：需求分析背景數據列表頁，滾動加載數據多條數據情況下，點擊某一條，進入詳細頁進行編輯修改，刪除操作保存返回上一頁在上面的情況下，想要保持在上次瀏覽位置，并且保持數據是最新的解決辦法原始的辦法在點擊詳情頁的時候，記住瀏覽位置，傳遞參數或者存到本需求分析背景：1.數據列表頁，滾動加載數據；2.多條數據情況下，點擊某一條，進入詳細頁進行編輯（修改，刪除）操作；3.保存返回上一頁；在上面的...

everfly 2019-08-26 18:27 評論0 收藏0
vue中keepAlive的使用

摘要：文檔在及其更高版本中，和將會在樹內的所有嵌套組件中觸發。另外，在我們的項目中遇到路由相同但參數不同的情況組件被復用，不更新的問題，官方給出了響應路由參數變化根據參數數據響應前言在開發中經常有從列表跳到詳情頁，然后返回詳情頁的時候需要緩存列表頁的狀態（比如滾動位置信息），這個時候就需要保存狀態，要緩存狀態；vue里提供了keep-alive組件用來緩存狀態。可以用以下幾種方案解決問題...

Anleb 2019-08-23 18:22 評論0 收藏0
用Vue開發仿旅游站webapp項目總結（下）

摘要：用開發仿旅游站項目總結上該說的話，該表明的上篇已經表明了。之后的路由切換不再請求數據是因為組件內容是從內存取了不會再重新創建了，對應的鉤子函數不會再執行了。此時，通過新增的生命周期鉤子函數以及這個緩存值就實現了我們要的功能了。用Vue開發仿旅游站webapp項目總結（上）該說的話，該表明的上篇已經表明了。謝謝上篇評論區一些同學~ 很鼓勵我，不過下下篇估計沒了，這篇總結完，下下篇可...

libxd 2019-08-29 17:15 評論0 收藏0
用Vue開發仿旅游站webapp項目總結（下）

摘要：用開發仿旅游站項目總結上該說的話，該表明的上篇已經表明了。之后的路由切換不再請求數據是因為組件內容是從內存取了不會再重新創建了，對應的鉤子函數不會再執行了。此時，通過新增的生命周期鉤子函數以及這個緩存值就實現了我們要的功能了。用Vue開發仿旅游站webapp項目總結（上）該說的話，該表明的上篇已經表明了。謝謝上篇評論區一些同學~ 很鼓勵我，不過下下篇估計沒了，這篇總結完，下下篇可...

KavenFan 2019-08-26 12:24 評論0 收藏0