关于vue的keepAlive页面缓存

关于vue的keepAlive页面缓存

条件:路由导航得在路由router.vue中

本人初次在项目中实操无误区：

	1、不能明确导航位置也就是上面所说的条件，一般这个路由导航是写router.vue中，意思是路由渲染前，就会通过router.beforeEach获取到而进行一些路由的确定
	2、不明确路由渲染的router-view位置

具体操作：

1、对需要缓存的组件路由中加keepalive
例子：{
            path: 'list',
            name: 'entityList',
            meta: {
              breadcrumb: '数据列表',
              keepAlive: true,
              cachePages: ['tityDetail']
            },
            component: () =>
              import(./views/tity/list.vue')
          }


2、在渲染的路由router-view中配置keepalive
例子：
 <keep-alive :exclude="$route.meta.exclude">
  <router-view v-if="$route.meta.keepAlive" :key="$route.fullPath"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" :key="$route.fullPath"></router-view>


3、在上述的条件说的路由导航中配置
例子:
 router.beforeEach((to, from, next) => {
// 页面缓存
if(to.meta.keepAlive){
  to.meta.exclude=[]
} else if(from.meta.keepAlive && from.meta.cachePages && from.meta.cachePages.indexOf(to.name) > -1) {
  to.meta.exclude=[]
} else{
  to.meta.exclude=[to.name, from.name]
}
说明：
   exclude是缓存keepaliv后来真加的意思是在这个里面有名的组件将不缓存
   include意思是在这个里面有名的就缓存

这是小白在项目中学到的，也是刚入手，分享给大家希望有些帮助。