码迷,mamicode.com
首页 > 其他好文 > 详细

vue页面是否缓存的两种方式

时间:2019-04-01 15:46:36      阅读:342      评论:0      收藏:0      [点我收藏+]

标签:att   keepalive   name   -keep   code   rom   nbsp   方式   turn   

第一种
<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页面是否缓存的两种方式

标签:att   keepalive   name   -keep   code   rom   nbsp   方式   turn   

原文地址:https://www.cnblogs.com/dianzan/p/10636620.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!