vue實(shí)現(xiàn)頁(yè)面緩存功能
本文實(shí)例為大家分享了vue實(shí)現(xiàn)頁(yè)面緩存功能的具體代碼,供大家參考,具體內(nèi)容如下
主要利用keep-alive實(shí)現(xiàn)從列表頁(yè)跳轉(zhuǎn)到詳情頁(yè),然后點(diǎn)擊返回時(shí),頁(yè)面緩存不用重新請(qǐng)求資源。
一、在router里配置路由
在meta里定義頁(yè)面是否需要緩存
import Vue from "vue";
import Router from "vue-router";
// 避免到當(dāng)前位置的冗余導(dǎo)航
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
Vue.use(Router);
export default new Router({
base: '',
routes: [{
path: "/",
name: "index",
component: () => import("@/layout"),
redirect: '/login',
children: [
{
path: 'dutySheet',
name: 'dutySheet',
component: () => import("@/pages/Dashboard/DutySheet")
},
{
path: 'searchWord',
name: 'searchWord',
component: () => import("@/pages/dailyReportManage/searchWord/index"),
meta: {
keepAlive: true // 需要緩存頁(yè)面
}
},
// 匹配維護(hù)
{
path: "troopAction",
name: "troopAction",
component: () => import("@/pages/Dashboard/TroopAction"),
meta: {
keepAlive: false// 不需要緩存
}
},
]
},
]
});
二、配置APP.vue
使用keep-alive來(lái)進(jìn)行緩存
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
三、點(diǎn)擊返回按鈕時(shí)調(diào)用this.$router.back()方法就可以了
// 返回
bacKBnt(){
this.$router.back()
},
四、清除緩存
只針對(duì)跳轉(zhuǎn)到"exhibitionWord"或"exhibitionWeekWord"頁(yè)面才進(jìn)行緩存,跳轉(zhuǎn)其他頁(yè)面不用緩存。
beforeRouteLeave(to, from, next) {
if (to.name == 'exhibitionWord' || to.name == 'exhibitionWeekWord') { // 需要緩存的路由name
from.meta.keepAlive = true
next()
}else{
from.meta.keepAlive = false
next()
}
},
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue開(kāi)發(fā)實(shí)現(xiàn)評(píng)論列表
這篇文章主要為大家詳細(xì)介紹了vue開(kāi)發(fā)實(shí)現(xiàn)評(píng)論列表,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
詳解Vue CLI 3.0腳手架如何mock數(shù)據(jù)
這篇文章主要介紹了詳解Vue CLI 3.0腳手架如何mock數(shù)據(jù),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
elementui之el-table-column日期格式顯示方式
文章介紹了如何使用formatter屬性對(duì)表格某一列的內(nèi)容進(jìn)行日期格式化,通過(guò)綁定日期格式化的方法實(shí)現(xiàn),展示了前端代碼的模板和方法,并給出了前端效果的展示2024-12-12
Vue實(shí)現(xiàn)數(shù)字動(dòng)畫(huà)的幾種方案
本文介紹了三種使用Vue實(shí)現(xiàn)動(dòng)態(tài)數(shù)字動(dòng)畫(huà)的方案:使用Vue的響應(yīng)式數(shù)據(jù)與`setInterval`逐步更新數(shù)字,通過(guò)Vue的動(dòng)畫(huà)API和CSS動(dòng)畫(huà)效果為數(shù)字增加過(guò)渡效果,以及使用更高效的`requestAnimationFrame`來(lái)提供更加流暢的動(dòng)畫(huà)表現(xiàn),每種方案都詳細(xì)說(shuō)明了原理、實(shí)現(xiàn)步驟和代碼示例2025-02-02

