关于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。