Vue keep-alive和activated的用法
<keep-alive> 是 Vue 的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 1. 使用 router.meta 属性，预先定义需要缓存的组件 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view>> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> 路由部分： routes: [ { path: '/test1', component: test1, meta: { keepAlive: true } // 需要缓存 }, { path: '/test2', component: test2, meta: { keepAlive: false} // 不需要缓存 }, test1 组件会被缓存，而 test2 组件不会被缓存。 2. 动态缓存 router-view 里面的部分组件页面 如果只想 router-view 里面某个、或某些页面组件被缓存，通常有如下两种办法： 使用 include/exclude 来实现 配合 router.meta 属性来实现 1）. 使用 include/exclude 来实现，每个组件中需要加 name 来匹配 include