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页面是否缓存的两种方式的主要内容,如果未能解决你的问题,请参考以下文章

vue 页面跳转的两种方式

vue路由跳转的两种方式

Vue中使用echarts图表的两种方式

vue.js---加载JSON文件的两种方式

[vue-router4快速入门] 1.页面跳转的两种方式

Vue路由实现页面跳转的两种方式(router-link和JS)