keepAlive

发布时间:2021-06-23 22:41:15 浏览量:122 标签: keepAlive

App.vue

<router-view/> 占位 具体加载哪个组件取决是什么路由

<keep-alive>

占位标签

<keep-alive>

<keep-alive></keep-alive> 是vue中的内置组件,能在组件切换的时候,将状态保留在内存中,防止重复的DOM渲染

就是将数据缓存起来

如果使用以上的方式,是对所有的组件都进行缓存处理


如果需要对一个进行缓存

使用Route中的meta

在路由的文件中添加一个属性


router/index.js中添加meta属性


Vue.use(VueRouter)


const routes = [

  {

    path: '/',

    name: 'Home',

    component: Home,

    meta:{

      keepAlive:true

    }

  },

需要个哪个路由组件设置缓存,就在哪里加


1.需要加缓存中的路由中添加meta属性,设置一个对象,键和值 值为true

2.在<keep-alive >

$route 当前路由对象.meta.自定义属性如果为真,就显示,如果为加,就删除 

<route-view v-if="$route">

</keep-alive>



搜索
关于我
吴英赫
最新标签
推广