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>

转载于:https://www.cnblogs.com/dianzan/p/10636620.html