keep-alive 路由缓存

本文参考：https://blog.youkuaiyun.com/qq_34664239/article/details/89499120
是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM，提高性能，通常配合使用
拥有两个钩子函数 activated、deactivated
activated：在组件激活是会被调用
deactivated：在组件停用时被调用
可以查看之前生命周期文章中关于keep-alive中对于这两个钩子函数的打印测试
链接：https://blog.youkuaiyun.com/banzhuanren1/article/details/103183495
keep-alive虽然使用方便，但是在实际使用中需求是不一样的，有些组件是不需要进行缓存的，这个文章就介绍实现方式
代码亲测有效

公用代码

//router.js

import Vue from 'vue'
import Router from 'vue-router'
import letter from '@/components/letter';
import tab from '@/components/tab';

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/letter',
      name: 'letter',
      component: letter,
      meta:{
        isKeepAlive:true
      }
    },
    {
      path: '/tab',
      name: 'tab',
      component: tab,
      meta:{
        isKeepAlive:false
      }
    }
  ]
})

//tab子组件
<template>
  <div>
      <div>
          <p>tab组件</p>
            {{ num }}
      </div>
  </div>
</template>
<script>
export default {
    name: 'tab',
    data(){
        return{
            num:0
        }
    },
    created(){
        this.changeNum()
    },
    methods:{
        changeNum(){
            setInterval(() => {
                 this.num++
            }, 1000);
        }
    }
  }
</script>

// letter子组件
<template>
  <div>
      <p>letter组件</p>
      {{ num }}
  </div>
</template>
<script>
export default {
    name: 'letter',
    data(){
        return{
            num:0
        }
    },
    created(){
        this.changeNum()
    },
    methods:{
        changeNum(){
            setInterval(() => {
                 this.num++
            }, 1000);
        }
    }
  }
</script>

第一种方法:
父组件

<template>
  <div id="app">
      <div>
          <router-link  to='/letter'> letter</router-link>
           <router-link to='/tab'> tab</router-link>
      </div>
     isKeepAlive 为路由文件中路由对象配置的属性，根据这个属性来判断组件是否缓存
      <keep-alive >
          <router-view v-if="$route.meta.isKeepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.isKeepAlive"></router-view> -->
  </div>
</template>

第二种方法 include

<template>
  <div id="app">
      <div>
          <router-link  to='/letter'> letter</router-link>
           <router-link to='/tab'> tab</router-link>
      </div>
	  **include: 字符串或正则表达式。只有匹配的组件会被缓存。
	  exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。**
      <keep-alive include="letter">
          <router-view ></router-view>
      </keep-alive>
       <keep-alive include="tab">
          <router-view ></router-view>
      </keep-alive>
  </div>
</template>