vue页面是否缓存的两种方式
Posted dianzan
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue页面是否缓存的两种方式相关的知识,希望对你有一定的参考价值。
第一种
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
配合路由
//在router文件加上meta判断
import Vue from ‘vue‘
import Router from ‘vue-router‘
Vue.use(Router)
export default new Router({
{//home会被缓存
path:"/home",
component:home,
meta:{keepAlive: true}
}
{//hello不会被缓存
path:"/hello",
component:hello,
meta:{keepAlive: false}
}
})
第二种
// 组件
export default {
name: ‘test-keep-alive‘,
data () {
return {
includedComponents: "test-keep-alive"
}
}
}
<keep-alive include="test-keep-alive">
<!-- 将缓存name为test-keep-alive的组件 -->
<component></component>
</keep-alive>
<keep-alive exclude="test-keep-alive"> <!-- 将不缓存name为test-keep-alive的组件 --> <component></component> </keep-alive>
以上是关于vue页面是否缓存的两种方式的主要内容,如果未能解决你的问题,请参考以下文章