Vue利用keep-alive實現頁面緩存

keep-alive是vue內置的一個組件,可以使被它包含的組件處于保留狀態,或避免被重新渲染。

<div>
    <keep-alive>
        <router-view></router-view><!-- 在這個里面的組件都會被緩存-->
    </keep-alive>
</div>

接下來讓我們來結合router緩存部分頁面
在App.vue中的設置

<template>
  <div id="app">
    <!-- 這里是跟組件 -->
        <!-- 加上緩存 -->
        <keep-alive>
            <router-view v-if="this.$route.meta.keep"></router-view>
        </keep-alive>
        <router-view v-if="!this.$route.meta.keep"></router-view>
  </div>
</template>

在router中增加配置meta
router中配置keep,需要緩存為ture,不需要為false

{
    path: '/shop_detail',
    name: 'shop_detail',
    component: shop_detail,
        meta:{
            keep:true  // keep(可隨意命名) true 表示頁面需要緩存
        }
},
{
     path: '/details',
     name: 'details',
     component: details,
         meta:{
            keep:false // keep(可隨意命名) false 表示頁面不需要緩存
    }
},
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容