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>