頁面緩存在頁面中長期會(huì)使用到，可以更快速的在頁面切換期間的資源獲取

主要是用keep-alive實(shí)現(xiàn)

在vue項(xiàng)目中，相關(guān)的寫法比較多，還有一些注意點(diǎn)需要仔細(xì)

第一種方式

在App.vue中

添加標(biāo)簽

  <keep-alive>
      <router-view />
  </keep-alive>

這會(huì)就是所有的頁面都會(huì)被緩存

這里做了兩個(gè)頁面的相互跳轉(zhuǎn)，分別寫了一個(gè)輸入框，在輸入內(nèi)容后，跳轉(zhuǎn)時(shí)，輸入的內(nèi)容因?yàn)榫彺娴脑驎?huì)被保留

如果存在某些頁面需要緩存，那么可以通過keep-alive的屬性去處理

其中就是include和exclude

include：名稱匹配的組件才會(huì)被緩存，其中可以寫字符串或正則表達(dá)式

exclude：名稱匹配的組件不會(huì)被緩存，其中同樣是字符串或正則表達(dá)式

這里的名稱是指組件的名稱

<script>
export default {
  name: 'HelloWorld'
}
</script>

第二種方式：

在路由中進(jìn)行設(shè)置通過添加meta，route/index.js

export default new Router({
? routes: [{
? ? ? path: '/',
? ? ? name: 'HelloWorld',
? ? ? component: HelloWorld,
? ? ? meta: {
? ? ? ? keepAlive: true // 該路由會(huì)被緩存
? ? ? }
? ? },
? ? {
? ? ? path: '/ss',
? ? ? name: 'ss',
? ? ? component: Ss,
meta: {? ? ? ? keepAlive:false // 該路由不會(huì)被緩存，不需要緩存的時(shí)候該屬性可以不用寫? ? ? }
}]
})

這時(shí)候頁面還需要通過該屬性進(jìn)行判斷是否緩存

在App.vue

? <keep-alive>
? ? ? <router-view v-if="$route.meta.keepAlive">
? ? ? </router-view>
? ? </keep-alive>
? ? <router-view v-if="!$route.meta.keepAlive">
? ? </router-view>

這樣寫有個(gè)優(yōu)點(diǎn)就是，需要緩存不需要緩存的name可以隨便寫，不需要做什么規(guī)律性的去寫出一個(gè)合適的正則去匹配上，就會(huì)更加靈活些

常見的應(yīng)用場景可以是，列表到詳情頁，從詳情頁返回到列表頁，如果說列表頁沒有做緩存，在單頁面下，會(huì)直接返回列表首頁(存在分頁的情況)，就不能直接返回至之前離開的列表頁，所以這個(gè)地方在列表頁添加頁面緩存后，可以做到返回至之前離開的列表頁

沒有緩存的時(shí)候，返回列表：

有緩存的時(shí)候，返回列表

所以從某些程度上來講，即增加了頁面的響應(yīng)速度，又增加了用戶體驗(yàn)，總體來說，還是比較實(shí)用的。

以上就是動(dòng)力節(jié)點(diǎn)小編介紹的Vue頁面緩存"，希望對(duì)大家有幫助，想了解更多可查看編程入門教程。動(dòng)力節(jié)點(diǎn)在線學(xué)習(xí)教程，針對(duì)沒有任何Java基礎(chǔ)的讀者學(xué)習(xí),讓你從入門到精通,主要介紹了一些Java基礎(chǔ)的核心知識(shí)，讓同學(xué)們更好更方便的學(xué)習(xí)和了解Java編程，感興趣的同學(xué)可以關(guān)注一下。