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 表示頁面不需要緩存
}
},