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>