前言：在一個(gè)系統(tǒng)的各個(gè)頁(yè)面間切換如果沒(méi)設(shè)置緩存頁(yè)面會(huì)導(dǎo)致重復(fù)請(qǐng)求數(shù)據(jù)霍转，從而頁(yè)面不夠流暢導(dǎo)致用戶體驗(yàn)感變差季希。
實(shí)現(xiàn)
- 在系統(tǒng)的主體頁(yè)面十艾，為需要添加緩存的頁(yè)面添加
<keep-alive> </keep-alive>組件野瘦，用來(lái)判斷頁(yè)面路由是否添加了緩存v-if="$route.meta.isKeepAlive"
<div class="content">
<transition name="move" mode="out-in">
<keep-alive>
<router-view v-if="$route.meta.isKeepAlive"></router-view>
</keep-alive>
</transition>
<transition name="move" mode="out-in">
<router-view v-if="!$route.meta.isKeepAlive"></router-view>
</transition>
</div>
- 在系統(tǒng)的路由管理頁(yè)面為對(duì)應(yīng)頁(yè)面的路由添加緩存條件
isKeepAlive: true如果不需要添加緩存條件的可以將條件改為isKeepAlive: false
path: '/user_project_power',
component: resolve => require(['../components/page/userMenu/user_projectGroup.vue'], resolve),
meta: {
title: '用戶項(xiàng)目權(quán)限',
isKeepAlive: true
}
image.png
