Vue設置keepAlive不生效怎么解決

本篇內容主要講解“Vue設置keepAlive不生效怎么解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue設置keepAlive不生效怎么解決”吧!

設置keepAlive不生效

如演示，Vue頁面導航回退后頁面重新刷新了，搜索條件及結果都重置了，對于頁面需要頻繁切換的系統來說，體驗不佳，我們希望頁面第一次打開時加載，此后回退不再刷新

查閱了Vue官網后，發現vue2.0提供了一個keep-alive組件。

1.在App.vue中的設置

<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設置

利用meta屬性

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

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

檢查這個組件在router文件中的配置name和組件實例中的name不一致，如下面，全局守衛中拿到的to或from的name是從router中對應的路由對象中拿的，而App.js 中的keepAlive標簽中的exclude是對比的組件實例中的name

 使用過程發現，組件的name和router配置的name不一樣，keep-alive也無法生效，這里也提供給我們一種思路，如果頁面不需要緩存，把name設置不一樣就好了（不推薦使用）

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

坑出現背景

在維護公司代碼時發現里面寫watch route不生效，無法監聽子路由的table切換。組件不會緩存，但是全局組件已經做過緩存處理。此處每次進入此table頁都會觸發created周期。花費大半個小時之后終于找到了問題點

坑的原因

keep-alive緩存時include中的名字必須與組件上的名字完全一致，組件沒有寫名字或者名字不一致就會導致緩存失效，每次進入組件都觸發created生命周期

代碼如下

全局組件中

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

組件中

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

到此，相信大家對“Vue設置keepAlive不生效怎么解決”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！