vue實(shí)現(xiàn)頁(yè)面緩存功能
更新時(shí)間：2021年10月28日 08:52:41 作者：無(wú)月大大
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁(yè)面緩存功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(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 filter 完美時(shí)間日期格式的方法，文中給大家提到了vue filter方法-時(shí)間格式化 的代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-08-08
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中的computed?和?vm.$data?原理，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
詳解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
在項(xiàng)目中會(huì)用到 Electron ， 一種最流行的框架，可使用Javascript構(gòu)建跨平臺(tái)的桌面應(yīng)用程序。在本文中，我們將研究如何通過(guò) Vite 開(kāi)發(fā) Vue 3 桌面項(xiàng)目，感興趣的可以了解一下2021-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)打地鼠小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了Vue自定義全局彈窗組件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要為大家介紹了Vue3啟用gzip壓縮時(shí)nginx配置gzip示例詳解詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
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