vue頁面緩存

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

主要是用keep-alive實現

在vue項目中，相關的寫法比較多，還有一些注意點需要仔細

第一種方式

在App.vue中

添加標簽

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

　這會就是所有的頁面都會被緩存

這里做了兩個頁面的相互跳轉，分別寫了一個輸入框，在輸入內容后，跳轉時，輸入的內容因為緩存的原因會被保留

 

 

 

 

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

其中就是include和exclude

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

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

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

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

　　

  <keep-alive include="HelloWorld">
　　　　<!-- 只有匹配到的HelloWorld才能被緩存-->
      <router-view />
   </keep-alive>

　　

     第二種方式：

     在路由中進行設置通過添加meta，route/index.js     

export default new Router({
  routes: [{
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      meta: {
        keepAlive: true // 該路由會被緩存
      }
    },

    {
      path: '/ss',
      name: 'ss',
      component: Ss,

      meta: {
        keepAlive:false // 該路由不會被緩存，不需要緩存的時候該屬性可以不用寫
      }
    }]
 })

　　

這時候頁面還需要通過該屬性進行判斷是否緩存

在App.vue 

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

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

　　這樣寫有個優點就是，需要緩存不需要緩存的name可以隨便寫，不需要做什么規律性的去寫出一個合適的正則去匹配上，就會更加靈活些

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

 

 

 

 

 沒有緩存的時候，返回列表：

 

 有緩存的時候，返回列表

 

 

 

 

所以從某些程度上來講，即增加了頁面的響應速度，又怎么增加了用戶體驗，總體來說，還是比較實用的