Vue實現詳情頁編輯完資料返回列表頁時,根據列表頁面原有搜尋以及分頁條件重新整理列表資料
阿新 • • 發佈:2021-12-02
第一步:保留住搜尋條件
在專案的公共資料請求方法頂部新增以下程式碼:
if(options.data && options.data.holdConditions) {
window.location.replace(`${window.location.href.split('#')[0]}#${encodeURIComponent(JSON.stringify(options.data))}`)
}
options
表示請求的引數,holdConditions
表示是否需要保留頁面引數,如果需要,就將引數以hash
的方式新增在頁面的url後面,此處必須用replace
url
,不然返回上一頁時會需要返回兩次。- 列表頁面每次請求列表資料時,都會將搜尋條件作為
url
的hash
值新增到url
的後面,給url
新增hash
值是不會重新整理頁面的。 - 同時替換
url
的另一個優勢在於,詳情頁面完成操作之後,通過this.$router.go(-1)
返回列表頁面時,列表頁的url
上面會保留hash
值,可以通過解析url
直接拿到這些引數。
第二步:寫一個解析url的公共方法
// 格式化引數 export const formatSearchField = (searchField) => { if (window.location.href.split('#').length === 2) { let params = JSON.parse(decodeURIComponent(window.location.href.split('#')[1])) searchField = Object.assign(searchField, params) } return searchField }
第三部:解析引數,重新整理列表資料
在進入頁面的時候儘早的呼叫第二步的公共方法解析url
,並賦值給搜尋條件物件,可以在created
或者mounted
方法中進行
this.searchField = formatSearchField(this.searchField)
賦值之後就可以呼叫列表資料請求的函數了