记一次vue 的keep-alive踩坑之路 —— active和deactivated()函数不执行

现象：路由頁面被缓存，销毁阶段函数不执行，active和deactivated()函数不执行，进入页面的created函数（创建期函数）执行。

原因：

<template>
  <div id="app"> 
    <keep-alive v-if="$route.meta.keepAlive">
    	<div> //未激活
        	<router-view :class="this.$route.meta.requireAuth===true?'':'tab-bottom'"/>
        </div>
    </keep-alive>
    <div>
    <template>

改正：

<template>
  <div id="app">
    <keep-alive v-if="$route.meta.keepAlive">
        	<router-view :class="this.$route.meta.requireAuth===true?'':'tab-bottom'"/>
    </keep-alive>
    <div>
    <template>

• <keep-alive>正常生效条件：
  1.只能包裹动态组件，不能包裹div等标签，要想保持状态，就得把那部分封装在一个功能性的组件上。
  2.keep-alive仅支持第一个元素,单节点激活。
  3.一个keep-alive只能在同一时间段内保持一个组件状态，也就是里面不能有两个动态组件
  4.向上滑动后，切换页面再切换回来，要想页面在上一次滑动的地方，路由模式要是 history模式
  vue 官网关于keep-alive