乐趣区

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

退出移动版