Vue路由开启keep-alive缓存页面
2018-08-31 11:28
1286 查看
<keep-alive>
是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行,相应的created和mounted钩子函数将不再被执行。
prop:
include: 字符串或正则表达式。只有匹配的组件会被缓存。
exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。 在2.1.0版本Vue中
常见用法: // 组件 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 include="a,b"> <!-- 将缓存name为a或者b的组件,结合动态组件使用 --> <component :is="view"></component> </keep-alive> <!-- 使用正则表达式,需使用v-bind --> <keep-alive :include="/a|b/"> <component :is="view"></component> </keep-alive> <!-- 动态判断 --> <keep-alive :include="includedComponents"> <router-view></router-view> </keep-alive> <keep-alive exclude="test-keep-alive"> <!-- 将不缓存name为test-keep-alive的组件 --> <component></component> </keep-alive>
结合router,缓存部分页面
使用$route.meta的keepAlive属性: <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> 需要在router中设置router的元信息meta: //...router.js export default new Router({ routes: [ { path: '/', name: 'Hello', component: Hello, meta: { keepAlive: false // 不需要缓存 } }, { path: '/page1', name: 'Page1', component: Page1, meta: { keepAlive: true // 需要被缓存 } } ] }) 使用效果 以上面router的代码为例: <!-- Page1页面 --> <template> <div class="hello"> <h1>Vue</h1> <h2>{{msg}}</h2> <input placeholder="输入框"></input> </div> </template> <!-- Hello页面 --> <template> <div class="hello"> <h1>{{msg}}</h1> </div> </template> (1) 在Page1页面输入框输入“asd”,然后手动跳转到Hello页面; (2) 回到Page1页面发现之前输入的"asd"依然保留,说明页面信息成功保存在内存中;
相关文章推荐
- 路由页面缓存开启 以及 keep-alive 给你埋下的坑
- vue 中使用keep-alive进行页面缓存
- 详解关于Vue2.0路由开启keep-alive时需要注意的地方
- Vue路由开启keep-alive时的注意点
- Vue路由开启keep-alive时的注意点
- Vue路由开启keep-alive时的注意点
- 使用vue的时候我们使用keep-alive会将页面缓存的解决方法
- vue2.0 keep-alive 缓存页面数据 3ff0
- 详解Vue路由开启keep-alive时的注意点
- Vue路由开启keep-alive时的注意点
- Vue路由开启keep-alive时的注意点
- 详解Vue路由开启keep-alive时的注意点
- Vue路由开启keep-alive时的注意点
- 深入理解与使用keep-alive(配合router-view缓存整个路由页面)
- Vue路由开启keep-alive时的注意点
- vue2.0 keep-alive实现缓存页面
- Vue路由开启keep-alive时的注意点
- keep-alive的深入理解与使用(配合router-view缓存整个路由页面)
- Vue路由开启keep-alive时的注意点
- Vue路由开启keep-alive时的注意点