Vue keep-alive基础用法

想使用keep-alive，必须在router和相关组件页面里面添加name属性，且名称对应，如下：

Router

{
	path: '',
	component: layout ,
	children: [
		{
			name: 'Analysis',// 必须滴
			path: '/analysis',
			component:()=>import('@/views/page/analysis/index.vue'),
			meta: { title: '', keepAlive: true	},
		},
	]
},
{
	path: '',
	component: layout,
	children: [
		{
			name: 'ReportDetail',// 必须滴
			path: '/report/detail',
			component:()=>import('@/views/page/analysis/report/detail.vue'),
			meta: {	title: '', keepAlive: false },
		},
	]
}

组件页面

......
export default {
  name: 'Analysis' // 必须滴
}
......

......
export default {
  name: 'ReportDetail' // 必须滴 
}
......

RouterView

<template>
<!-- keep-alive，必须是同级别的router-view时才会起作用，简言之就是两个页面都渲染的同一个router-view -->
	<transition :name="isTransition">
       <keep-alive :include="includePageNames">
         <router-view class="" :key="key" />
       </keep-alive>
    </transition>	
</template>
<script>
import ...
export default {
	name: '',
	data() {
		return {
			isTransition: true? 'slide-left' : '', // 它的具体作用用的时候再研究
      		includePageNames: []
		};
	},
  computed: {
    key() {
      // return this.$key();
      return this.$route.path
    }
  },
  watch: {
    '$route' : {// 监听路由，取值
      handler(nv, ov) {
        for(let i in nv.matched){
          if(i !== 0){
            let indexOf = this.includePageNames.indexOf(nv.matched[i].name)
            //判断数组中是否存在这个name，如果存在，则说明是返回的，要清除缓存
            if(indexOf === -1 && nv.matched[i].meta.keepAlive) {//不存在，添加缓存
              this.includePageNames.push(nv.matched[i].name)
            }
          }
        }
      },
      deep: true,
      immediate: true
    }
  }
};
</script>