原文：Vue路由开启keep-alive时的注意点
Vue路由开启keep alive时的注意点 这个不是业务的要求，但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM，觉得作为一个前端工程师有必要优化下的加载逻辑，正好vue提供了keep alive的功能，所以就试用了下。当然，干任何事儿都不会一帆风顺的，在路上的磕磕碰碰在所难免，故在此记录下遇到的问题，希望看到这篇文章的人能有所帮助。ps：这个也没多难。 HTML部分： lt te ...
2017-09-15 14:29 0 1622 推荐指数：
相关推荐
说直接上码，一般是在 src/App.vue 设置开启 keep-alive 实现页面数据缓存： ...
mode:hash模式下： HTML部分： <template> <div id="app"> <keep-alive> <!--使用keep-alive会将页面缓存--> <router-view v-if ...
是 Vue提供的一个抽象组件，主要用于保留组件状态或避免重新渲染。 但是 keep-alive会把其包 ...
专属生命周期 用于子组件缓存，可以让子组件缓存还是不缓存 网上找的很不错， 1、直接使用 include - ...
一、失效原因： 如果多级路由的话，一般会有一个空白的router-view页面做为公共的模板充当中间的嵌套路由/页面；当你切换不同的页面，中间公共部分的组件，一会儿缓存，一会儿不缓存，因为是公共组件，导致了 最终的页面缓存失效。 二、解决办法： 目前我认为只有将三级路由转为二级路由 ...
当我们不想每次使用路由跳转时都从新加载页面的时候，就可以使用 keep-alive 去设置，添加之前默认缓存所有页面，如果需要指定自己想要的页面缓存或者不缓存可以通过include和exclude属性去设置。 如上代码，绑定keepAliveData数组内的组件加入缓存 ...
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，< ...