【keep-active新增的include exclude max +路由元数据 meta】

keep-active

包括不活动的实例

1. 包括组件
2. 包括路由的坑 router-view

有三个属性

include - 字符串或正则表达式、或者数组。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。
如果组件过多的话且名字类似我们可以使用component，
Vue提供了 component ,来展示对应名称的组件
例如

 	<keep-alive>
      <component v-if="activeIndex!=4" :is="'mycom'+activeIndex"></component>
    </keep-alive>
    <component v-if="activeIndex==4" :is="'mycom'+activeIndex"></component>

路由元数据 meta

我们在路由配置文件中给需要添加缓存的页面配置路由元信息
meta是对象形式，与path，name同级

meta: {
       needCache: true,
    },

可以搭配keep-active使用，例如

 <keep-alive>
      <router-view v-if="$route.meta.needCache"/>
    </keep-alive>

    <router-view v-if="!$route.meta.needCache"/>

并且页面路由的变化是可以监听的；用watch来监听

 watch: {
          // '$route'(newVal,oldVal){
          //     console.log(newVal);
          // }
          '$route':{
              handler(newVal,oldVal){
                  console.log(newVal)
                  this.name = newVal.name
              },
              immediate: true, // 开启立即监听
              // deep: true // 深度监听
          }
      }