欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue設(shè)置keepAlive不生效問(wèn)題及解決

 更新時(shí)間：2022年04月15日 16:15:40   作者：YouluBank  
這篇文章主要介紹了Vue設(shè)置keepAlive不生效問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

設(shè)置keepAlive不生效

如演示，Vue頁(yè)面導(dǎo)航回退后頁(yè)面重新刷新了，搜索條件及結(jié)果都重置了，對(duì)于頁(yè)面需要頻繁切換的系統(tǒng)來(lái)說(shuō)，體驗(yàn)不佳，我們希望頁(yè)面第一次打開(kāi)時(shí)加載，此后回退不再刷新

查閱了Vue官網(wǎng)后，發(fā)現(xiàn)vue2.0提供了一個(gè)keep-alive組件。

1.在App.vue中的設(shè)置

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

2.在router中的index.js設(shè)置

利用meta屬性

export default[
 {
  path:'/',
  name:'home',
  components:Home,
  meta:{
    keepAlive:true //需要被緩存的組件
 },
 {
  path:'/book',
  name:'book',
  components:Book,
  meta:{
     keepAlive:false //不需要被緩存的組件
 } 
]

 正常的話這樣頁(yè)面就能緩存并生效了，如果還是不生效

檢查這個(gè)組件在router文件中的配置name和組件實(shí)例中的name不一致，如下面，全局守衛(wèi)中拿到的to或from的name是從router中對(duì)應(yīng)的路由對(duì)象中拿的，而App.js 中的keepAlive標(biāo)簽中的exclude是對(duì)比的組件實(shí)例中的name

                   

          

 使用過(guò)程發(fā)現(xiàn)，組件的name和router配置的name不一樣，keep-alive也無(wú)法生效，這里也提供給我們一種思路，如果頁(yè)面不需要緩存，把name設(shè)置不一樣就好了（不推薦使用）

keep-alive緩存組件不生效的坑

坑出現(xiàn)背景

在維護(hù)公司代碼時(shí)發(fā)現(xiàn)里面寫watch route不生效，無(wú)法監(jiān)聽(tīng)子路由的table切換。組件不會(huì)緩存，但是全局組件已經(jīng)做過(guò)緩存處理。此處每次進(jìn)入此table頁(yè)都會(huì)觸發(fā)created周期?；ㄙM(fèi)大半個(gè)小時(shí)之后終于找到了問(wèn)題點(diǎn)

坑的原因

keep-alive緩存時(shí)include中的名字必須與組件上的名字完全一致，組件沒(méi)有寫名字或者名字不一致就會(huì)導(dǎo)致緩存失效，每次進(jìn)入組件都觸發(fā)created生命周期

代碼如下

全局組件中

 ? <keep-alive include="history">
? ? ? ?<router-view></router-view>
? ? </keep-alive>

組件中

export default {
? name: "history",/*此處的name必須有且與include中的一致*/
? components: {
? ? VTable
? },

如是，問(wèn)題解決!

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

相關(guān)文章

最新評(píng)論