关于vue.js:页面缓存相关问题部份页面使用缓存解决方法

页面部份：

<el-main>
    <!-- 应用单页组件缓存 -->
    <keep-alive v-if="$route.meta.keepAlive">
        <router-view></router-view>
    </keep-alive>
    <router-view v-else></router-view>
</el-main>

router.js：

{
    path:'supplier', // 供应商治理
    name:'supplier',
    component:()=> import('@/business/baseinfo/supplier'),
    meta:{keepAlive:true}
}

如果 keepAlive:true，则应用缓存。
<keep-alive> 包裹动静组件时，会缓存不流动的组件实例，而不是销毁它们。和 <transition> 类似，<keep-alive> 是一个形象组件：它本身不会渲染一个 DOM 元素，也不会呈现在父组件链中。

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
路由的内容只在第一次进入的时候，触发 created 和 mounted 办法，再次进入页面不会从新获取数据。
所以页面初始化要用 activated 替换 created 函数。

当引入 keep-alive 的时候，页面第一次进入，钩子的触发程序 created-> mounted-> activated，退出时触发 deactivated。当再次进入（后退或者后退）时，只触发 activated。