資訊專欄INFORMATION COLUMN
摘要：問題由來最近用做前端項(xiàng)目，從查詢頁面進(jìn)入詳情頁時(shí)，返回頁面需要保留上次的查詢條件，表格當(dāng)前頁數(shù)。從其他菜單進(jìn)去，不需要緩存，要保持頁面的初始狀態(tài)。當(dāng)進(jìn)入詳情頁，需要對該條數(shù)據(jù)進(jìn)行修改時(shí)，修改成功后返回，應(yīng)該更新列表。
問題由來
1、最近用vue做前端項(xiàng)目，從查詢頁面進(jìn)入詳情頁時(shí)，返回頁面需要保留上次的查詢條件，表格當(dāng)前頁數(shù)。
2、從其他菜單進(jìn)去，不需要緩存，要保持頁面的初始狀態(tài)。
基于上面兩種情況，我打算用vue中的keep-alive來緩存頁面。
列表項(xiàng)目
. 用vue的內(nèi)置組件keep-alive來緩存列表頁面，再路由出口渲染組件時(shí)配置：
在路由選項(xiàng)中，配置meta屬性，keepAlive為true即為需要緩存，同時(shí)設(shè)置isBack屬性，用來標(biāo)識頁面是否是從詳情頁面返回的。
{
name:"borrow",
path:"/borrow",
component:borrow,
meta: {
keepAlive:true,
isBack: true,
},
}
通過beforeRouteEnter(to,from,next)，來判斷路由是從哪里跳轉(zhuǎn)的，如果是從詳情頁跳轉(zhuǎn)的，將當(dāng)前路由對象的meta.isBace設(shè)置為true，否則設(shè)置為false。（設(shè)置在查詢頁面）
beforeRouteEnter(to, from, next) {
if (from.path == "/addborrow") {
to.meta.isBack = true;
} else {
to.meta.isBack = false;
}
next();
},
為了在其他頁面進(jìn)入時(shí)，更新頁面中的列表數(shù)據(jù)和查詢條件，我們將在activated鉤子函數(shù)中掛在頁面初次進(jìn)入時(shí)的請求數(shù)據(jù)。當(dāng)進(jìn)入詳情頁，需要對該條數(shù)據(jù)進(jìn)行修改時(shí)，修改成功后返回，應(yīng)該更新列表。
activated() {
if (!this.$route.meta.isBack) {
this.handleClear("queryForm");/*清空查詢條件*/
}else{
this.$route.meta.isBack = false;
this.getBorrowList();/*列表重新加載*/
}
},
參考資料
https://yq.aliyun.com/article...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100210.html
摘要：需求分析背景數(shù)據(jù)列表頁，滾動加載數(shù)據(jù)多條數(shù)據(jù)情況下，點(diǎn)擊某一條，進(jìn)入詳細(xì)頁進(jìn)行編輯修改，刪除操作保存返回上一頁在上面的情況下，想要保持在上次瀏覽位置，并且保持?jǐn)?shù)據(jù)是最新的解決辦法原始的辦法在點(diǎn)擊詳情頁的時(shí)候，記住瀏覽位置，傳遞參數(shù)或者存到本 需求分析 背景：1.數(shù)據(jù)列表頁，滾動加載數(shù)據(jù)；2.多條數(shù)據(jù)情況下，點(diǎn)擊某一條，進(jìn)入詳細(xì)頁進(jìn)行編輯（修改，刪除）操作；3.保存返回上一頁； 在上面的...
摘要：文檔在及其更高版本中，和將會在樹內(nèi)的所有嵌套組件中觸發(fā)。另外，在我們的項(xiàng)目中遇到路由相同但參數(shù)不同的情況組件被復(fù)用，不更新的問題，官方給出了響應(yīng)路由參數(shù)變化根據(jù)參數(shù)數(shù)據(jù)響應(yīng) 前言 在開發(fā)中經(jīng)常有從列表跳到詳情頁，然后返回詳情頁的時(shí)候需要緩存列表頁的狀態(tài)（比如滾動位置信息），這個(gè)時(shí)候就需要保存狀態(tài)，要緩存狀態(tài)；vue里提供了keep-alive組件用來緩存狀態(tài)?？梢杂靡韵聨追N方案解決問題...
摘要：用開發(fā)仿旅游站項(xiàng)目總結(jié)上該說的話，該表明的上篇已經(jīng)表明了。之后的路由切換不再請求數(shù)據(jù)是因?yàn)榻M件內(nèi)容是從內(nèi)存取了不會再重新創(chuàng)建了，對應(yīng)的鉤子函數(shù)不會再執(zhí)行了。此時(shí)，通過新增的生命周期鉤子函數(shù)以及這個(gè)緩存值就實(shí)現(xiàn)了我們要的功能了。 用Vue開發(fā)仿旅游站webapp項(xiàng)目總結(jié) （上）該說的話，該表明的上篇已經(jīng)表明了。謝謝上篇評論區(qū)一些同學(xué)~ 很鼓勵(lì)我，不過下下篇估計(jì)沒了，這篇總結(jié)完，下下篇可...
摘要：用開發(fā)仿旅游站項(xiàng)目總結(jié)上該說的話，該表明的上篇已經(jīng)表明了。之后的路由切換不再請求數(shù)據(jù)是因?yàn)榻M件內(nèi)容是從內(nèi)存取了不會再重新創(chuàng)建了，對應(yīng)的鉤子函數(shù)不會再執(zhí)行了。此時(shí)，通過新增的生命周期鉤子函數(shù)以及這個(gè)緩存值就實(shí)現(xiàn)了我們要的功能了。 用Vue開發(fā)仿旅游站webapp項(xiàng)目總結(jié) （上）該說的話，該表明的上篇已經(jīng)表明了。謝謝上篇評論區(qū)一些同學(xué)~ 很鼓勵(lì)我，不過下下篇估計(jì)沒了，這篇總結(jié)完，下下篇可...
閱讀 3494·2023-04-25 21:43
閱讀 3106·2019-08-29 17:04
閱讀 807·2019-08-29 16:32
閱讀 1546·2019-08-29 15:16
閱讀 2158·2019-08-29 14:09
閱讀 2747·2019-08-29 13:07
閱讀 1633·2019-08-26 13:32
閱讀 1326·2019-08-26 12:00
